Uncaught error: Objects are not valid as a React child

Question

I'm really new to react, im trying to build an app in that library, however i keep running into this error and i don't know what it does nor how to resolve it. I'm just trying to pass data from a parent component to a child component, previously i was trying to do that from a fetch and from an array but now it's just basic props and still i get this error.

the parent component

import axios, * as others from 'axios';
import Row from 'react-bootstrap/Row';
import Cerd from "./Cerd";
import movieArray from "./MovieArray";


export function UseFetch(message){

   let number =  movieArray.length;
   console.log(number);
   let image = movieArray[0].image;
   let text = movieArray[0].title;
   let actors = movieArray[0].actors;
   const toStringer = text.toString();
console.log(toStringer);

    return(
        <div className="row-wrapper">
            <Row>    
                <Cerd title="ciao"/>
            </Row>
        </div>
        )
        
    }

the child component:

mport Card from 'react-bootstrap/card';
    
export default function Cerd(title){
    console.log(title);

    
    return(
        <div>{title}</div>
    )
    
}

Here's the error:

I already tried to change computer and search for solutions online but nothing changes, I0m not passing an array or an object in the props as it is just a simple string. This is a killer error because it's not the first time that happens to me and i still haven't found what to do when it happens... can somebody help?

Answer 1

In react component props passing, you cannot take it like taking from function. You defined "title" in props of component, but you cannot take it as a variable. You have to take it as shorthand.

// your code;
export default function Cerd(title){

// must be;
                               \/
export default function Cerd({title}){

Try ({title}) instead of (title).