Rendering array inside object to a table using react

Question

I'm new in React and I stuck with this. Suppose I have a state like this

state = {
    dataSource: {
      model: ["Slip on", "Running", "Sneaker"],
      colors: ["Dark", "Light", "Colorful"],
      activity: ["School", "Hang out", "Rest"],
    }
};

I want to render a table with the header as the name of the object inside dataSource and value correspond to that object. I already tried using map() and cause I knew that map() can not be used on object I tried to change the state like this

state = {
    dataSource: [
      ["Slip on", "Running", "Sneaker"],
      ["Dark", "Light", "Colorful"],
      ["School", "Hang out", "Rest"],
    ]
};

then try to solve it like this

render() {
  <table>
    <tbody>
      {this.state.dataSource.map((c) => (
        <tr>
          {c.map((x) => (
            <td>{x}</td>
          ))}
        </tr>
      ))}
    </tbody>
  </table>
}

it did render the value but not the right way, so I wonder if there is a way to do it? Thanks for your help :)

Please just show what you tried to do

Dmitry Reutov
– Dmitry Reutov

2020-06-13 11:37:28 +00:00
Commented Jun 13, 2020 at 11:37 — Dmitry Reutov
– Dmitry Reutov, Commented Jun 13, 2020 at 11:37
state.dataSource vs state.dataSet what is the one?

kyun
– kyun

2020-06-13 12:03:26 +00:00
Commented Jun 13, 2020 at 12:03 — kyun
– kyun, Commented Jun 13, 2020 at 12:03
oh sorry i mean state.dataSource. i will edit right away

Andhika Kurniawan
– Andhika Kurniawan

2020-06-13 12:10:59 +00:00
Commented Jun 13, 2020 at 12:10 — Andhika Kurniawan
– Andhika Kurniawan, Commented Jun 13, 2020 at 12:10

Józef Podlecki · Accepted Answer · 2020-06-13 11:52:29Z

Object.keys might help

const { Component } = React;

class App extends Component {

  constructor(props) {
    super(props);
    
    this.state = {
      dataSource: {
        model: ["Slip on", "Running", "Sneaker"],
        colors: ["Dark", "Light", "Colorful"],
        activity: ["School", "Hang out", "Rest"],
      }
    };
  }

  render() {
    const { dataSource } = this.state;
    const arr = Array(dataSource.model.length).fill(0);
    
    return <table>
      <thead>
        <tr>
          {Object.keys(dataSource).map(pr => <th key={pr}>{pr}</th>)}
        </tr>
      </thead>
      <tbody>
        {arr.map((pr, index) => <tr key={index}>
          {Object.keys(dataSource).map(key => <td key={key}>{dataSource[key][index]}</td>)}
        </tr>)}
      </tbody>
    </table>
  }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
  );

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>

Dmitry Reutov · Accepted Answer · 2020-06-13 11:42:52Z

0

Map can not work. In case of objects you should use objects methods, for example something like

return
  Object.entries(state.dataSource).map(([key: tableName, value]) => 
    <div>
      <h1>{tableName}</h1>
      {value.map(v => <div>{v}</div>}
    </div>
  )

answered Jun 13, 2020 at 11:42

Dmitry Reutov

3,0321 gold badge9 silver badges22 bronze badges

Collectives™ on Stack Overflow

Rendering array inside object to a table using react

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related