CODEWITHSUNDEEP
javascriptreactjsjsx
Gianluca
Gianluca

Reputation: 980

Outputting variable content to React Component

I have this:

let arr = [
  { name:"string 1"},
];

and I find the value using this:

let obj = arr.find(o => o.name === 'string 1');

then I am trying to output obj to my react component.

class Links extends Component {
render() {
    return (
        <React.Fragment>
            <Link to="/" className="navbar-brand">
            { obj } 

            </Link>

It is says Uncaught Error: Objects are not valid as a React child (found: object with keys {name})

I am new to react so not sure how to do this properly... Thanks 4 the help :)

Upvotes: 0

Views: 28

Answers (1)

Atharva Sharma
Atharva Sharma

Reputation: 315

The problem here is, you are tring to print an object which is not allowed.

If you try running this program:

let arr = [
  { name:"string 1"},
];
let obj = arr.find(o => o.name === 'string 1');
console.log(obj); //{name: "string 1"}

You will find that obj is an object which has a key value pair. So, what you need to do is to replace {obj} with {obj.name}

Upvotes: 2

Related Questions