reactjs - Getting "Error: Objects are not valid as a React child when rendering object values

Question

I am trying to render values from data object in an array but I have got these error messages

Error: Objects are not valid as a React child (found: object with keys {id, course_code, course_name, slug, course_fee, duration, start_date, end_date,}

I don't really know where am getting it wrong. Here is the API object response.

{
  "success": true,
  "message": "Course Retrieved Successfully.",
  "data": {
    "id": 1,
    "course_code": "null",
    "course_name": "Greatness",
    "slug": "greatness",
    "course_fee": 10,
    "duration": "10hours",
    "start_date": "2000-09-08",
    "end_date": "2000-09-08",
  }
}

My code below

const [coursedetails, setCourseDetails] = useState([])
const [status,setStatus] = useState('init');

const init =()=>{
  setStatus('loading')

  return axios.get('http://example.com/api/courses').then(response => {
      setCourseDetails(response.data);
      setStatus('success')
    }).catch(error =>{
      console.log('error',error)
      setStatus('error')
    })
}

useEffect(()=>{
  init()
},[])


return(
  <div>

  {coursedetails.data && coursedetails.data.course_name ? coursedetails.data : ''}
  <div>
)

question from:https://stackoverflow.com/questions/65877656/getting-error-objects-are-not-valid-as-a-react-child-when-rendering-object-val

Answer 1

Your closing tag is incorrect. It should be </div> instead of <div>

<div>

{coursedetails.data && coursedetails.data.course_name ? coursedetails.data : ''}
</div>