Map array within array from state

Question

So my code is:

class MyComponent extends Component {
    constructor(props) {
      super(props);

        this.state = {

            myArray: [
                {id:1, continent:[
                    {id:1, name: 'Russia'},
                    {id:2, name: 'Germany'},
                    {id:3, name: 'Poland'}
                ]},

                {id:2, continent:[
                    {id:1, name: 'China'},
                    {id:2, name: 'India'},
                    {id:3, name: 'Bangladesh'}
                ]},

                {id:3, continent:[
                    {id:1, name: 'Brazil'},
                    {id:2, name: 'Peru'},
                    {id:3, name: 'Chile'}
                ]}      
            ],

            otherValue: 23
        }
    }


    subBoardList(id){
        return this.state.myArray[id].map((continent) => {
            return(
                <View>
                    <Text>{continent.name}</Text>
                </View>
            )
        })
    }


  render() {
    return (
      {this.subBoardList(2)}
    );
  }
}

I want to display the content of the continent array of which id is passed to the subBoardList function. How do I do that?

Error:

TypeError: undefined is not an object (evaluating 'this.state.myArray[id].map')

T. Short · Accepted Answer · 2019-12-22 17:02:58Z

5

You should be using:

this.state.myArray[id].continent.map(...

answered Dec 22, 2019 at 17:02

T. Short

3,62417 silver badges30 bronze badges

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

Comments

score 0 · Accepted Answer · 2019-12-22 18:14:33Z

class MyComponent extends Component {
        constructor(props) {
          super(props);

            this.state = {

                myArray: [
                    {id:1, continent:[
                        {id:1, name: 'Russia'},
                        {id:2, name: 'Germany'},
                        {id:3, name: 'Poland'}
                    ]},

                    {id:2, continent:[
                        {id:1, name: 'China'},
                        {id:2, name: 'India'},
                        {id:3, name: 'Bangladesh'}
                    ]},

                    {id:3, continent:[
                        {id:1, name: 'Brazil'},
                        {id:2, name: 'Peru'},
                        {id:3, name: 'Chile'}
                    ]}      
                ],

                otherValue: 23
            }
        }


        subBoardList(id){
            return this.state.myArray[id].continent.map((continent) => {
                // You need to add continent key after myArray since
                // index 2 = {id:3, continent:[
                //    {id:1, name: 'Brazil'},
                //    {id:2, name: 'Peru'},
                //    {id:3, name: 'Chile'}
                //]} 

                return(
                    <View>
                        <Text>{continent.name}</Text>
                    </View>
                )
            })
        }


      render() {
        return (
          <div> {this.subBoardList(2)} </div>
         // Add a div after return it's import to render anything
        );
      }
    }

Try like this.

Have look at this codesandbox snippet (codesandbox.io/s/react-viewer-demo-inline-emrxp)

Alex · Accepted Answer · 2019-12-23 05:11:26Z

0

If you want to search by id and id is not behave as an index, for example, id can be any number(10,11,12 or 120,155,254...), your subBoardList should be like this

 subBoardList(id) {
    return this.state.myArray.map(item => {

      if (item.id === id) {

        return item.continent.map(c => { return <li> {c.name} </li>; });

                           } 
      else return null;
    });
  }

sample

answered Dec 23, 2019 at 5:11

Alex

3,9911 gold badge20 silver badges27 bronze badges

Collectives™ on Stack Overflow

Map array within array from state

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related