Dynamically create buttons in react native

Question

I want to create a checkbox dynamically according to the data in API and then call the function inside my render function.

Can anyone suggest me any way, as I had used forEach but the data seem do not passed and hence I'm getting an error: forEach is undefined.

My snippet:

sizel=()=> this.state.data.sizes.forEach(function(size){
    <CheckBox
     title={size}
   checked=''
   />
 })

Does this answer your question? [React foreach in JSX](https://stackoverflow.com/questions/47616355/react-foreach-in-jsx) — Joseph D., Feb 19 '20 at 09:55
Can you help me with the syntax, please, am new to react native, I would be obliged if you help. — TRINA CHAUDHURI, Feb 19 '20 at 09:57
I think the problem in you code it that you use .forEach which doesn't return your checkbox just change it to .map as @JosephD. does in his answer instead — P-A, Feb 19 '20 at 10:23
"sizes": ["38", " 39", " 40", " 41", " 42", " 43", " 44", " 45", " 46"] it differs for every product, like for shoes they are numbers, for chlothes they are like XL,L,S etc @AshwithSaldanha — TRINA CHAUDHURI, Feb 19 '20 at 10:23

score 0 · Answer 1 · answered Feb 19 '20 at 11:02

0

check data.sizes has length also should not be undefined.

add this:

const { sizes } = this.state.data;
if( sizes && sizes.length){
 this.state.data.sizes.map(size => <CheckBox title={size} checked=''/> )
}

answered Feb 19 '20 at 11:02

Ravi Singh

1,049
1
10
25

score 0 · Answer 2 · answered Feb 19 '20 at 11:16

You need to add a validation before invoking forEach method, just like this:

   sizel = () => this.state.data && this.state.data.sizes && this.state.data.sizes.forEach(function (size) {
    return (
      <CheckBox
        title={size}
        checked=''
      />
    )
  })

Dynamically create buttons in react native

2 Answers2