How would I dynamically append duplicate components in react, react-native

Question

I am confused about how to properly dynamically add/create same components on button press for react native. I have used .map(()=>{}) on existing info to create components and then display the results.

Would I have to save each new component into a setstate array, then map that? I looked a little into refs, but wasn't sure how that was better than just a setstate. The problem I see is if I want to update the value for each component, how would I go about that if their all originally duplicates?

Something along the lines of this:

class SingleExercise extends Component {
  constructor(props) {
    super(props);
    this.state = {
      objInfo: this.props.navigation.getParam("obj"),
      currentSetSelected: 0
    };
    this.addSet = this.addSet.bind(this);
  }

  addSet = () => {
    return (
      <addSet />
    )
  }


  render() {
    const { navigation } = this.props;
    return (
      <View style={{ flex: 1 }}>
        <View style={{ height: 80 }}>
          <addSet />
          <View>
            <Button         //here
              large={false}
              onPress={() => {
                this.addSet();
              }}
              title={"add more"}
            />
          </View>
        </View>
      </View>
    );
  }
}

const addSet = () => {
  return (
    <TouchableHighlight>
    <View>
    <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        defaultValue={'test'}
        onChangeText={(text) => this.setState({text})}
      />
    </View>
    </TouchableHighlight>
  );
}

save values in state (and use map), not components... you can't return compoonents from handlers, too — xadm
– xadm, Commented Oct 7, 2018 at 20:43
Do you want to display the addset component multiple times? Based on the number of button clicks? — Lukasz
– Lukasz, Commented Oct 7, 2018 at 20:45
<addSet /> can't be a component - it's name isn't capitalized ;) — xadm
– xadm, Commented Oct 7, 2018 at 20:49

Lukasz · Accepted Answer · 2018-10-07 21:11:08Z

1

Here is what I would do:

Every click on addSet button should increment the AddSets counter like this:

        <Button         
          large={false}
          onPress={() => {
             this.setState({addSetsCounter: this.state.addSetsCounter});
          }}
          title={"add more"}
        />

After every state update your component will be re-rendered. So now, all you need to do is to forLoop in through that counter and return as many AddSets components as needed. A simple for loop with .push() inside would do.

Inside render, before return place something like that:

let sets =[];    
for(let i =0;i<this.state.addSetsCounter;i++){
    sets.push(<AddSets key="AddSets-{i}"/>);
}

Then simply render your {sets}.

I cannot fully test that right now, I wrote that from the top of my head, just play with the above, at least I hope it points you in a right direction.

edited Oct 7, 2018 at 21:11

answered Oct 7, 2018 at 20:57

Lukasz

1,84010 silver badges13 bronze badges

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

2 Comments

xadm Over a year ago

You forgot about key prop ;)

Lukasz Over a year ago

Good catch ;). Added.

Collectives™ on Stack Overflow

How would I dynamically append duplicate components in react, react-native

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related