Dynamically change styled component based on state AND index

styled components tutorial
styled-components nested elements
styled-components not working
next js styled-components
styled-components conditional
styled-components attrs
styled-components select
styled-components on click

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.

e.g. 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 :(

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.

Styling based on state instead of props? · Issue #1746 · styled , I want to style a component based on it's state (instead of props), which changes with clicking. However, I don't see any way to do this without  Dynamic changes are made with JS/TS code where the HTML elements are represented as objects and the attributes are represented as the properties of these objects. Therefore, to dynamically change the values we need to change the properties. For example, to change the style, we need to change the style property values.

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'};
`;

Change style based on React state · Issue #431 · styled-components , The state is changed, and my did go to bottom -50px, but this is a "hard change Is it possible to change the css based on a React components state including a transition? Currently I have the actions/index';. class Main  styled-components parses all of the style definitions into plain CSS at build time and drops everything them all into <style> tags in the head of your index.html file.

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>
}

FAQs, styled-components v5 does not introduce any breaking public API changes, and adds in your core index.html file (generated or static) within a typical <style> tag. The other is dynamic, meaning it will be different for every element of your set a property on attrs to a function that computes that prop based on other props. The customizable nature of styled-components is the real strength. This could commonly be applied to a button that needs to change styles based on context.

How styled-components works: A deep dive under the hood, But what if our component has styles based on the props? We need to update our implementation so that it evaluates interpolations in the styles when a Then this class name is stored in the component state as generatedClassName . 3. But my personal rule is to use the style attr for all dynamic styles with undermined  import styled from 'styled-components' const Button = styled.button`` import styled from 'styled-components' const Button = styled.button`` This Button variable here is now a React component that you can use like any other React component! This unusual backtick syntax is a new JavaScript feature called a tagged template literal.

8 Ways to Style React Components Compared, Choosing the right method for styling components isn't a perfect absolute. of style sheets, and it can be easier to change or customize styles when needed. Props are used instead of classes in CSS and set the properties dynamically. acts as a weapon to represent shared styles between the states. In Styled Components, this can be done by referring to another component within a component. This is known as the "component selector" pattern. Whenever a component is created or wrapped by the styled() factory function, it is also assigned a stable CSS class for use in targeting. As seen in the code snippet above,

React Styled Components Tutorial, Simple dynamic styling: adapting the styling of a component based a lot with state, Styled Components also allows you to dynamically set In the example, the Button component changes the color , border , and background-color based A file like index.css in the src folder should be able to handle this. When overriding style, you can pass either a style object, or a function that receives some props related to the current internal state of the component, allowing you to dynamically change styles