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

Please read this stackoverflow.com/help/how-to-ask

UtkarshPramodGupta
– UtkarshPramodGupta

2018-07-27 07:43:58 +00:00
Commented Jul 27, 2018 at 7:43 — UtkarshPramodGupta
– UtkarshPramodGupta, Commented Jul 27, 2018 at 7:43

Jayffe · Accepted Answer · 2018-07-27 08:15:51Z

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 a a 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>
  )
}

edited Jul 27, 2018 at 8:15

answered Jul 27, 2018 at 8:04

Jayffe

1,28910 silver badges13 bronze badges

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

8 Comments

kouroshstst Over a year ago

thanks that looks promising but I get this error : Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of ComparedItemsData.

Jayffe Over a year ago

It sounds like you did put ComparedItemsData in a separate file without exporting it to use it in your main file. Do you export your comp like this : export default ComparedItemsData at the bottom of the file?

kouroshstst Over a year ago

please see my code again, I put some more in it, the thing is I dont know why your sandbox code works because I am basically doing the same thing

kouroshstst Over a year ago

if I want to use this react.fragment where should I put it? I tested it inside this file and outside the scope of the class but got the error that I told in previous comment

Jayffe Over a year ago

Your last code is working well on sandbox, so the problem seems to be somewhere else... I just copy/paste your code and everything is working

|

Shubham Khatri · Accepted Answer · 2018-07-27 07:45:53Z

0

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)

        }
}

answered Jul 27, 2018 at 7:45

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

2 Comments

Shubham Khatri Over a year ago

How are you rendering comparedItemsData. I think you could be rendering comparedProperties instead of comparedItemsData

kouroshstst Over a year ago

no, it is like this:

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

Collectives™ on Stack Overflow

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

2 Answers 2

8 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related