Objects are not valid as a React childd

Question

I have an array object in a nested array which is giving me an error obejcts are not valid, when i am trying to render it in the jsx for printing name and value

This is what my data looks like:

    const [avail, setavail] = useState({
      firstName: '',
      lastName: '',
      mobileNumber: '',
      doctorId: '',
      avalabilities: [
          {
              availabilityId: '',
              day: [
                { name: 'Sunday', value: 'Sunday' },
                { name: 'Monday', value: 'Monday' },
                { name: 'Tuesday', value: 'Tuesday' },
                { name: 'Wednesday', value: 'Wednesday' },
                { name: 'Thursday', value: 'Thursday' },
                { name: 'Friday', value: 'Friday' },
                { name: 'Saturday', value: 'Saturday' },
              ],
              isChecked: false,
              checked: false,
              allChecked: false,
              error: null
          }
      ]
  });

Here i am trying to render with map in jsx

{avail.avalabilities.map((av, avIndex) => (
                    <div key={av.availabilityId}>
                   
                   {av.day.map((item, index) => (
                    <div key={index}>
                            <input
                              checked={item?.checked || false}
                              name={item.name}
                              value={item.value}
                              onChange={(e) =>
                                checkedHandler(e, avIndex, index)
                              }
                              type="checkbox"
                              id={item.value}
                            />
                               {console.log(item.name)}
                               {console.log(item.value)}
                            <label htmlFor={item.value}>{item.name}</label>
                          </div> 
                        
                      ))}

But its giving me an error of objects are not valid everytime. Hoping for a solution here.

  const checkedHandler = (e, avIndex, index) => {
    console.log(e.target.checked, avIndex, index);
    setavail((prev) => {
      let newState = { ...prev };
      newState.avalabilities[avIndex].day[index].checked = e.target.checked;
      return newState;
    });
  };

Answer 1

It seems like you have do not have well-formed code. There is a closing division tag that is missing. Please use this.

avail.avalabilities.map(
                        (av, avIndex) => (
                            <div key={av.availabilityId}>
                            {
                                av.day.map(
                                    (item, index) => (
                                        <div key={index}>
                                            <input
                                            checked={item?.checked || false}
                                            name={item.name}
                                            value={item.value}
                                            onChange={(e) =>
                                                checkedHandler(e, avIndex, index)
                                            }
                                            type="checkbox"
                                            id={item.value}
                                            />
                                            {console.log(item.name)}
                                            {console.log(item.value)}
                                            <label htmlFor={item.value}>{item.name}</label>
                                        </div>
                                    )
                                )
                            }
                            </div>
                        )
                    )