Rendering multiple Table Rows with multiple Table Data in table using ReactJS

Question

Hi I want to have multiple TRs and inside one, have multiple TDs using react I want to loop through my comparedProperties object and create the table in render method dynamically but I get this error:

Uncaught Error: Objects are not valid as a React child (found: object with keys {id, address, long, lat, cityId, cityDistrict, phone, name, userId, city}) . If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of Comparison.

my data object is like this and I can not change its structure:

       //this is a samle data, keys in this object can dynamically change elsewhere
       let comparedProperties = {
         id: [1001,1002],
         address: ["abc","def"],
       };

this is my code:

   class Comparison extends Component {

render() {
    let comparedProperties = {
        id: [1001, 1002],
        address: ["abc", "def"]
    };

    let comparedItemsData = [];

    for (var key in comparedProperties) {
        if (comparedProperties.hasOwnProperty(key)) {
            let newTR = <tr key={Math.random()} className="compare-table-row">
                <td className="table-item-header">
                    {key}
                </td>
                {comparedProperties[key].map((item) => {
                    return <td key={Math.random()} className="table-item">{item}</td>;
                })}
            </tr>;

            comparedItemsData.push(newTR)
        }
    }

    return (
        <table className="compare-table">
            <tbody>
            {comparedItemsData}
            </tbody>
        </table>
    )
}
     }

    const mapStateToProps = (state) => ({
          ...state
          });
           const mapDispatchToProps = (dispatch) => ({
              actions: bindActionCreators(Actions, dispatch)
          });
          export default connect(
                mapStateToProps,
               mapDispatchToProps
            )(Comparison);

update answer:

so I figuerd where the problem was but I expexted better error message from react the problem was that in my comparedProperties I had an object inside the array that caused the error

    let comparedProperties = {"id":[101,102],"estateAgency":[{"id":1},{"id":2}]}

Answer 1

Are you trying to do something like that ?

  render(){

    let comparedProperties = {
      id: [1001, 1002],
      address: ["abc", "def"],
    };

    return (
      <table>

        {Object.keys(comparedProperties).map(key=>(

          <tr key={Math.random()} className="compare-table-row">

            <td className="table-item-header">
              {key}
            </td>

            {comparedProperties[key].map((item) => (
              <td key={Math.random()} className="table-item">{item}</td>
            ))}

          </tr>

        ))}

      </table>
    )
  }

Or if you want to try as aa stateless comp you insert in your table :

const ComparedItemsData = ({ comparedProperties }) =>(
    <React.Fragment>
      {Object.keys(comparedProperties).map(key => (
        <tr key={Math.random()} className="compare-table-row">
          <td className="table-item-header">{key}</td>
          {comparedProperties[key].map(item => (
            <td key={Math.random()} className="table-item">
              {item}
            </td>
          ))}
        </tr>
      ))}
    </React.Fragment>
)

const App = ()=>{

  let comparedProperties = {
    id: [1001, 1002],
    address: ["abc", "def"]
  };

  return (
    <table className="compare-table">
      <tbody>
        <ComparedItemsData comparedProperties={comparedProperties}/>
      </tbody>
    </table>
  )
}

Answer 2

You just need to return the td elements from within map function. Also never specify Math.random() as a key to the react elements because everytime render is called a new key will be assigned and it will force React to re-render the entire component even though nothing would have changed.

for (var key in comparedProperties) {
    if (comparedProperties.hasOwnProperty(key)) {
          let newTR = <tr key={key} className="compare-table-row">
                <td className="table-item-header">
                    {key}
                </td>

                //comparedProperties[key] is an array of
               // values that I want to make them as td elements
                { comparedProperties[key].map((item) => {
                    return <td  key={item} className="table-item">{item}</td>;
                })}
            </tr>;


            comparedItemsData.push(newTR)

        }
}