How to fix error objects are not valid react child?

Question

I am trying map through an object with the goal to render the key and their value inside a p tag. I am having the error message object are not valid react child.

How can I overcome this error?

        <div className="d-flex flex-wrap">
              {
              
              Object.keys(features).map((item,index) => {           
                  console.log('type',item);
                  console.log(features[item]);
                  

                   return   <p key={item} className="fw-bold bg-light fs-6 text-primary m-1 p-2">{{[item]:features[item]}}</p> 
                      
               
              })
              }
          </div>

Sanjay · Accepted Answer · 2022-03-05 11:46:08Z

2

This error is because the code

{{[item]:features[item]}}

actually results to an object. So child of <p> tag is an object. You can solve it by using Template literals inside <p> tag

 <div className="d-flex flex-wrap">
          {
         
          Object.keys(features).map((item,index) => {           
              console.log({[item]:features[item]});
              console.log(features[item]);
              

               return   <p key={item} className="fw-bold bg-light fs-6 text-primary m-1 p-2" >{`{${item}: ${features[item]}}`}</p> 
                  
           
          })
          }
      </div>

answered Mar 5, 2022 at 11:46

Sanjay

93111 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hgb123 · Accepted Answer · 2022-03-05 11:43:37Z

1

In this section of React doc, it is said that:

You can put any valid JavaScript expression inside the curly braces in JSX

Moreover {[item]:features[item]} itself is not a valid expression, according to this list

So instead, you have to embed 2 expressions, item and features[item]

return (
  <p key={item} className="fw-bold bg-light fs-6 text-primary m-1 p-2">
    {item}: {features[item]}
  </p>
)

answered Mar 5, 2022 at 11:43

hgb123

14.9k3 gold badges24 silver badges43 bronze badges

1 Comment

Leo Over a year ago

hi @hgb123 , i did have it set this way initially but it gives me the same error

Icekid · Accepted Answer · 2022-03-05 11:41:17Z

0

It is because of the double brackets in your code

Use only one brackets like this

{[item]:features[item]}

answered Mar 5, 2022 at 11:41

Icekid

5151 gold badge5 silver badges14 bronze badges

Comments

Amila Senadheera · Accepted Answer · 2022-03-05 11:42:57Z

0

Following is JSON

{[item]:features[item]}

If you meant to render the JSON as a string then do like this.

JSON.stringify({[item]:features[item]})

answered Mar 5, 2022 at 11:42

Amila Senadheera

13.4k16 gold badges31 silver badges48 bronze badges

Comments

Eisa Rezaei · Accepted Answer · 2022-03-05 11:49:00Z

0

Do it like this

Object.keys(features).map((item) => {   
return <p>  {item} : {features[item]}</p>
}

answered Mar 5, 2022 at 11:49

Eisa Rezaei

5932 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to fix error objects are not valid react child?

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related