0

Learning React and stuck at this error

Invariant Violation Objects are not valid as a React child (found: object with keys {information}). If you meant to render a collection of children, use an array instead.

What am I doing wrong, confused in the Array error part Below are my main files

Myinfo.js file

import React from "react"
import Myinfoo from './Myinfoo'
import info from './info.js'

// function Myinfo() {
// const infomation = info.map(it => <Myinfoo key={it.id} name= {<h1>{it.name}</h1>} price ={it.price} description = {it.description}/>)
//     return (
//         <div className="todo">
//             {infomation}
//         </div>
//     )
// }
class Myinfo extends React.Component{
    constructor(){
        super()
        this.state = {
            infos: info
        }   
    }
    render(){
        //console.log(this.state.infos)
        const infod = [];
        const information = this.state.infos.map(it => <Myinfoo key={it.id} infos1={it} />)
        //const information = this.state.infos
        //console.log(information)
        return(
            {information}
        )
    }
}
export default Myinfo

Myinfoo .js file

import React from "react"

// function Myinfoo(props) {
    

// }
class Myinfoo extends React.Component{
    render(){
        return (
            <div className="item">
                <input type="checkbox" checked={this.props.description} />

                <p style={{ display: this.props.name ? "block" : "none" }}>{this.props.name}</p>
                
            </div>
        )
    }
}
export default Myinfoo

Here is my Json Data info.js

const info = [
    {
        id:"1",
        name:"Pencil",
        
        description : true
    },
    {
        id: "12",
        name: "Pencil1",
        
        description: false
    },
    {
        id: "1223",
        name: "Eraser",
        
        description: false
    },
    {
        id: "134",
        name: "Eraser1",
        
        description: true
    }


]



export default info
  • `return( {information} )` does indeed return an object, do `return information` or `return <>{information}>` instead – Lennholm Feb 26 '19 at 21:04
  • Possible duplicate of [Invariant Violation: Objects are not valid as a React child](https://stackoverflow.com/questions/33117449/invariant-violation-objects-are-not-valid-as-a-react-child) – Bonjov Feb 26 '19 at 21:06

1 Answers1

0

You need a root tag. Try this: 

return
(
    <div>
        {information}
    </div>
)
Willian Gaspar
  • 301
  • 3
  • 8
  • This worked, but I am confused, can I know the reason for the
    tag (Sorry I am confused here little bit)
     –  Feb 26 '19 at 21:08
  • @FaiyazSundrani The div is what makes it a JSX body (where `{information}` is a wrapped expression). Without it, it's just a regular Javascript expression, where `{information}` is a plain JS object. – Lennholm Feb 26 '19 at 21:13
  • Everything must be inside a root tag. So if you have for example "return (

    )", like you have in a list, react will throw an error. It doesn't need to be a div, but it must be something wrapping the whole thing.     – Willian Gaspar Feb 26 '19 at 21:15
  • Simply `return information`would work as well. An array of proper elements is handled by React.. – Lennholm Feb 26 '19 at 21:58