How I can print nested array under value (object element) in React.js

userNY451 0
Viewed 28

I am trying to print a nested array (sublist) under object element (value) from the state.list. I tried but did not get the expected result I want. I made two components named Orderlist and Item which hold the nested array and value elements. I could not find where I am doing wrong. Sorry! I am in the learning stage and working on a super small project. Every help would be appreciated.

import React from "react";
import "./styles.css";
const Item = (props) => {
  return props.list.map((item)=><li>{item.sublist}</li>);
};
const Orderlist = (props) => {
  return props.list.map((element) => (
    <ol>
      {element.value}
      <Item list = {props.list} />
    </ol>
  ));
};

class App extends React.Component {
  state = {
    list: [
      { value: "Fruit", sublist: ["Banana", "Apple", "Graps"] },
      { value: "Vegetable", sublist: ["Carrat", "Potato", "Mushroom"] },
      { value: "Sports", sublist: ["Cricket", "Badminton", "Football"] },
      { value: "Continent", sublist: ["Asia", "Europe", "Africa"] }
    ]
  };
  render() {
    return <Orderlist list={this.state.list} />;
  }
}
export default App;

outcome got ........

Fruit

BananaAppleGraps
CarratPotatoMushroom
CricketBadmintonFootball
AsiaEuropeAfrica

Vegetable

BananaAppleGraps
CarratPotatoMushroom
CricketBadmintonFootball
AsiaEuropeAfrica

Sports
BananaAppleGraps
CarratPotatoMushroom
CricketBadmintonFootball
AsiaEuropeAfrica

Continent
BananaAppleGraps
CarratPotatoMushroom
CricketBadmintonFootball
AsiaEuropeAfrica
reactjs
3 Answers

There were two mistakes:

  1. You need to pass element.sublist as list prop to Item instead of props.list:
<Item list={element.sublist} />
  1. List item should be just item instead of item.sublist:
<li>{item}</li>


const Item = (props) => {
  return props.list.map((item, index) => <li key={index}>{item}</li>);
};
const Orderlist = (props) => {
  return props.list.map((element, idx) => (
    <ol key={idx}>
      {element.value}
      <Item list={element.sublist} />
    </ol>
  ));
};

class App extends React.Component {
  state = {
    list: [
      { value: "Fruit", sublist: ["Banana", "Apple", "Graps"] },
      { value: "Vegetable", sublist: ["Carrat", "Potato", "Mushroom"] },
      { value: "Sports", sublist: ["Cricket", "Badminton", "Football"] },
      { value: "Continent", sublist: ["Asia", "Europe", "Africa"] }
    ]
  };
  render() {
    return <Orderlist list={this.state.list} />;
  }
}

ReactDOM.render(<App />, document.querySelector('.react'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

Amila Senadheera0
Taki Kauser0

try this :

const Item = (props) => {
  return props.list.map((item)=><li>{item}</li>);
};

const Orderlist = (props) => {
      return props.list.map((element) => (
        <ol>
          {element.value}
          <Item list = {element.sublist} />
        </ol>
      ))
TLEMCANI Abdelkadir0
Related