How to fix error objects are not valid react child?

March 5, 2022

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? thanks in advance

        <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>

>Solution :

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>