Question

53

How to get objects in array of object in React Native

rated 0 times [ 54] [ 1] / answers: 1 / hits: 21970 / 6 Years ago, wed, september 19, 2018, 12:00:00

I'm kind of lost to access some info in my static data. Here's the data :

{

 info1: {

    label: label,

    class: class-css,

    title: title,

    text: text,

    number: 20,

    tags: [

         {

            name: #twitter

        },

        {

            name: #myspace

        }

    ]

 },

 info2: {

    label: label,

    class: class-css,

    title: title,

    text: text,

    number: 20,

    tags: [

         {

            name: #instagram

        },

        {

            name: #facebook

        }

    ]

  }

}

Then I get the first info like that :

this.setState({

    currentLabel: this.state.labels[info1]

})

This is why I want and then I want to display info in a component and it's working until I try to get tags information. I tried a .map() but without success and error.

<View>

   <Text>{infoDetail.title}</Text>

   <Text>{infoDetail.text}</Text>

   <Text>How do I get tags information</Text>

</View>

Is it possible to access these objects in the array tags ?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mustafaericho

Add To Favorites

Follow

Total Points: 322

Total Questions: 103

Total Answers: 110

Location: Montenegro

Member since Thu, Jun 16, 2022

2 Years ago

mustafaericho questions

1 npm i Error: `gyp` failed with exit code: 1

Mon, May 31, 21, 00:00, 3 Years ago

1 Node js, process.env not reading enviroment variables

Sun, May 23, 21, 00:00, 3 Years ago

1 Webpack erroring on mini-css-extract-plugin loader

Sat, Feb 13, 21, 00:00, 3 Years ago

1 Webpack processAssets hook and asset source

Sat, Jan 2, 21, 00:00, 3 Years ago

1 what is the default AES config in crypto-js?

Thu, Nov 12, 20, 00:00, 4 Years ago

View All

answered 6 Years ago janeth · Accepted Answer

Here is a full working code. Since your labels state property is an object, you need to map it somehow. I've chosen Object.values here. You can use Object.keys or even Object.entries according to your needs.

I've used a separate Info component and passed the values to it, then render there. In this component, we are again mapping the tags, then rendering the list.

class App extends React.Component {

  state = {

    labels: {

      info1: {

        label: label1,

        class: class-css,

        title: title,

        text: text,

        number: 20,

        tags: [

          {

            name: #twitter,

          },

          {

            name: #myspace,

          },

        ],

      },

      info2: {

        label: label2,

        class: class-css,

        title: title,

        text: text,

        number: 20,

        tags: [

          {

            name: #instagram,

          },

          {

            name: #facebook,

          },

        ],

      },

    },

  }



  render() {

    const { labels } = this.state;

    return (

      <div>

        {

          Object.values( labels ).map( value =>

            <Info label={value} key={value.label} /> )

        }

      </div>

    );

  }

}



const Info = ( props ) => {

  const { title, text, tags } = props.label;

  const tagList = tags.map( tag => <p key={tag.name}>{tag.name}</p> );

  return (

    <div style={{ border: 1px solid gray, marginTop: -1px }}>

      <p>{title}</p>

      <p>{text}</p>

      <div>{tagList}</div>

    </div>

  );

};



ReactDOM.render(

  <App />,

  document.getElementById(root)

);

<script src=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js></script>

<div id=root></div>

Update

If your data is totally static then @Xavi A.'s method is a good option. I don't know how is your list but I provide a simple code including something like you want here.

const labels = {

  info1: {

    label: label1,

    class: class-css,

    title: title,

    text: text,

    number: 20,

    tags: [

      {

        name: #twitter

      },

      {

        name: #myspace

      }

    ]

  },

  info2: {

    label: label2,

    class: class-css,

    title: title,

    text: text,

    number: 20,

    tags: [

      {

        name: #instagram

      },

      {

        name: #facebook

      }

    ]

  }

};



class App extends React.Component {

  state = {

    currentLabel: Object.keys(labels)[0]

  };



  handleInfoChange = info => this.setState({ currentLabel: info });



  renderList = () => (

    <ul>

      {Object.keys(labels).map(info => (

        <Item key={info} info={info} onClick={this.handleInfoChange} />

      ))}

    </ul>

  );



  render() {

    const { currentLabel } = this.state;

    return (

      <div>

        {this.renderList()}

        <Info currentLabel={currentLabel} />

      </div>

    );

  }

}



const Item = props => {

  const { info, onClick } = props;

  const handleClick = () => onClick(info);

  return <li onClick={handleClick}>{info}</li>;

};



const Info = props => {

  const { currentLabel } = props;

  const { title, text, tags } = labels[currentLabel];

  const tagList = tags.map(tag => <p key={tag.name}>{tag.name}</p>);

  return (

    <div style={{ border: 1px solid gray, marginTop: -1px }}>

      <p>{title}</p>

      <p>{text}</p>

      <div>{tagList}</div>

    </div>

  );

};



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

<script src=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js></script>

<div id=root></div>