Dynamically change styled component based on state AND index

Question

So I have a list that was returned from an API request (not important) lets call it list = [1,2,3,4,5,6,7];

Now, inside render(), I have something like the following

render(){
  <Wrapper>
    {list.map((i) => {
      return (<Button id = {i} onClick = {this.customFunc.bind(this, i)} />)
    }
  </Wrapper>
}

Now, I have another list, lets call it list_check = [false...] (for all 7 elements listed above)

Assume that customFunc changes the respective button id in list_check from false to true.

eg if I clicked button 1 (id = 1) then list_check becomes [false, true, false...]

** Now my problem is: I have 2 styled components, Button and Button_Selected , how can i dynamically change between the 2 styled components so that if that unique button is clicked (change list_check[index] = true ), the element becomes Button_Selected instead of Button (The entire list is initalized as Button since all elements are false )

Just to make it clear: Both arrays are located in this.state and by 2 styled components I mean there exists

const Button = styled.div`
  //styling here
`;

and

const Button_Selected = Button.extend`
 //Small styling change to differentiate between selected and not selected
`;

edit: all answers are great! too bad I can only select one :(

Answer 1

You could just save the component to another variable.

this.state.list_check.map((item, i) => {
    const NecessaryButton = item ? SelectedButton : Button;
    return <NecessaryButton onClick={() => this.makeSelected(i)}>Normal Button</NecessaryButton>
})

You can see a live example here .

Answer 2

Although you can return 2 buttons based on conditional rendering .You can also pass props to your styled Button so that based on props you can change your styles.

   render(){
  <Wrapper>
    {list.map((i) => {
      return (<Button id = {i} isSelected={this.state.list_check[i]} onClick = {this.customFunc.bind(this, i)} />)
    }
  </Wrapper>
}

And in your styled Button:

  const Button = styled.div`
  styleName: ${props => props.isSelected ? 'styling_if_Selected' : 'styling_if_not_selected'};
`;

Answer 3

The easiest approach would be to have a single Button component and handle in the state if it was selected. Depending on this state you could switch classes. Example:

class Button extends React.Component {
    state = {
        isSelected: false
    };

    handleClick() {
        //Here we will set the state change and call the onClick function passed by props
        this.setState({isSelected: !this.state.isSelected}, () => { this.props.onClick(); });
    }

    render() {
        return (
            <button 
                class={this.state.isButtonSelected ? "classBtnSelected" : "classBtnDefault"} 
                onClick={this.handleClick}
            />
        );
    }
}

Still, if you want to switch components you can use state to control if it was selected and do a conditional rendering. Example:

render(){
  <Wrapper>
    {list.map((i) => {
      return (this.state.isSelected 
         ? <Button id={i} onClick = {this.customFunc.bind(this, i)} /> 
         : <Button_Selected id={i} onClick = {this.customFunc.bind(this, i)} />)
    }
  </Wrapper>
}