Rendering an object with array value

Question

I'm trying to render on my page checkboxes from an object with the key-values of the array and their value(the goal at the end is to select the key-value and all the value will be selected).

My problem now is when I'm trying to only render all of this value its simply not. Example of code:

import React from "react";
import "./SelectMasekhtot.css";

let fakeData = {
  book1: [1, 2, 3, 4, 5],
  book2: [1, 2, 3, 4, 5],
  book3: [1, 2, 3, 4, 5],
  book4: [1, 2, 3, 4, 5],
};

const SelectMasekhtot = () => {
  return (
    <div className='containerSelectMasekhtot'>
      <h1>selection part</h1>
      <div>
        {Object.entries(fakeData).forEach(([key, value]) => (
          <li>
            <span className='input-label'>{key}</span>
            <span className='input-label'>{value}</span>
          </li>
        ))}
      </div>
    </div>
  );
};
export default SelectMasekhtot;

I don't get why it seems so easy and simply not rendering. I created a function to console log the results and I get them it is simply not rendering.

You need to use `map` instead of `forEach`. forEach doesn't return anything. — DecPK, Jun 04 '21 at 16:29
See [Lists and Keys](https://reactjs.org/docs/lists-and-keys.html) from the React docs. — Tanner Dolby, Jun 04 '21 at 16:34

score 0 · Answer 1 · answered Jun 04 '21 at 16:34

Use map instead of forEach. Your code fixed:

let fakeData = {
  book1: [1, 2, 3, 4, 5],
  book2: [1, 2, 3, 4, 5],
  book3: [1, 2, 3, 4, 5],
  book4: [1, 2, 3, 4, 5],
};

const SelectMasekhtot = () => {
  return (
    <div className='containerSelectMasekhtot'>
      <h1>selection part</h1>
      <div>
        {Object.entries(fakeData).map(([key, value]) => (
          <li>
            <span className='input-label'>{key}</span>
            <span className='input-label'>{value}</span>
          </li>
        ))}
      </div>
    </div>
  );
};

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Rendering an object with array value

1 Answers1