CODEWITHSUNDEEP
javascriptreactjsreact-nativemap-function
Somename
Somename

Reputation: 3444

Map array within array from state

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')

Upvotes: 0

Views: 100

Answers (3)

Alex
Alex

Reputation: 3991

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

Upvotes: 0

user11621579
user11621579

Reputation: 

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.

Upvotes: 0

T. Short
T. Short

Reputation: 3614

You should be using:

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

Upvotes: 5

Related Questions