Dynamically creating elements based on json in REACT NATIVE

Question

I am new on this forum and new in React Native. Could someone write me a piece of code to create form elements (image, toggle switch) based on json.

My JSON look like

[{ "consumer": "S1", "status": "False"},{ "consumer": "S2", "status": "False"},{"consumer": "S3", "status": "True"},{ "consumer": "S4", "status": "False"},{ "consumer": "S7", "status": "False"}]

I would like to get i for each mode something like:

<View style={{width: '30%', height: 200}}>
          <Image
            source={
              require('../assets/images/s1.png') //sx
            }
            style={styles.welcomeImage}
          />

        </View>
        <View style={{width: '30%', height: 200}}>
          <Switch
            //here get status of s1..s8
        </View>

Brian Hoch · Accepted Answer · 2017-12-14 04:48:26Z

2

You should map through the array. Something like this:

render() {
  var consumers = [{ "consumer": "S1", "status": "False"},{ "consumer": "S2", "status": "False"},{"consumer": "S3", "status": "True"},{ "consumer": "S4", "status": "False"},{ "consumer": "S7", "status": "False"}];
  return (
    {consumers.map((c, i) => {
      return [
        <View style={{width: '30%', height: 200}}>
          <Image
            source={require('../assets/images/' + c.consumer + '.png')}
            style={styles.welcomeImage}
          />
        </View>
        <View style={{width: '30%', height: 200}}>
          <Switch value={c.status} />
        </View>
      ]
    })}
  );
}

answered Dec 14, 2017 at 4:48

Brian Hoch

1214 bronze badges

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

7 Comments

Endi Over a year ago

Thanks Brian but what is the easiest way to read this JSON to consumers variable and on what position, my JSON is actualy on link

Brian Hoch Over a year ago

Do you want to read the JSON in from an API call? If you're getting it from elsewhere I'd recommend getting the JSON in componentDidMount() and using setState to store it in your component state and then mapping that instead of a variable in the render function.

Brian Hoch Over a year ago

Or pass the JSON down as a prop from the parent component.

Endi Over a year ago

Wow Brian, you are so fast! Can you pass me a chunk of code beacuse I am still floating insecure in this waters :D

Brian Hoch Over a year ago

Thanks, Endi. I can, but I'm still not sure how you're getting the JSON. Is it hard-coded, are you getting it from an external source, is it being passed down from a parent?

|

Collectives™ on Stack Overflow

Dynamically creating elements based on json in REACT NATIVE

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related