Having an issue with rendering table in a React component

Question

I am trying to render a table inside a react component but having trouble aligning the rows with the header

render() {
         console.log("Top Searches",this.props.topSearches)
         return(
          <div className="topsearches">
          <table border="2" align="center">
          <th> Search Term </th>
          <th>Count </th>
             {this.props.topSearches.map((top_search, index) => (
                  <tr>
                    {Object.keys(top_search).map(function(key) {
                      return <div>      
                      <tbody>
                      <td align="center">{key} </td>
                      <td align="right">{top_search[key]}</td>
                      </tbody>
                       </div>

                      })}


                </tr>
            ))}
            </table>
          </div>

      )
    }

This is the output i am getting

Rutul Patel · Accepted Answer · 2019-10-01 19:01:16Z

1

I assume, you are trying to achieve something like this.

I have edited this in codesandbox here. https://codesandbox.io/s/sparkling-sound-yd1ih

return (
    <div className="topsearches">
      <table border="2" align="center">
        <thead>
          <th> Search Term </th>
          <th>Count </th>
        </thead>
        <tbody>
          {props.topSearches.map((top_search, index) =>
            Object.keys(top_search).map((key, index) => {
              return (
                <tr>
                  <td>{key}</td>
                  <td>{top_search[key]}</td>
                </tr>
              );
            })
          )}
        </tbody>
      </table>
    </div>
  );

Modification I made to achieve this:

Added <thead>
Corrected <tbody> loop

Please let me know if you have any further questions!

edited Oct 1, 2019 at 19:01

answered Sep 30, 2019 at 0:36

Rutul Patel

6832 gold badges10 silver badges23 bronze badges

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

8 Comments

user12049337 Over a year ago

One issie I have is my json has only one object so

user12049337 Over a year ago

so [{"apple": 42, iphone:10} instead of [ {apple:42}, {iphone:10}]

Rutul Patel Over a year ago

So will it display only one value in a row ? Do you want to display only one value in a row ?

user12049337 Over a year ago

yes i want it displaye dthe way u have it but having difficulty ding that

Rutul Patel Over a year ago

please provide your JSON input data

|

Collectives™ on Stack Overflow

Having an issue with rendering table in a React component

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related