changing style object at index of array in state in react

Question

i'm trying to update a style object inside my options array inside my apps state when an option is clicked in another component using toggleSelected (). Does anyone know how to best access the object and set the background color to something different?

App.js

this.state = {
    options: [
      {
        id: 0,
        label: "Industrial Truck and Tractor Operators",
        value: "53-7051",
        style: {
          display: "flex",
          margin: "auto",
          paddingTop: "1em",
          paddingBottom: "1em",
          paddingLeft: "1em",
          borderBottom: "solid",
          borderColor: "black",
          borderWidth: ".1em",
          color: "#64bd9a",
          backgroundColor: "white"
        },
        tooltip_text:
          'Operate industrial trucks or tractors equipped to move materials around a warehouse, storage yard, factory, construction site, or similar location. Excludes “Logging Equipment Operators" (45-4022).'
      },
      {
        id: 1,
        label: "Order Clerks",
        value: "43-4151",
        style: {
          display: "flex",
          margin: "auto",
          paddingTop: "1em",
          paddingBottom: "1em",
          paddingLeft: "1em",
          borderBottom: "solid",
          borderColor: "black",
          borderWidth: ".1em",
          color: "#64bd9a",
          backgroundColor: "white"
        },
        tooltip_text:
          'Receive and process incoming orders for materials, merchandise, classified ads, or services such as repairs, installations, or rental of facilities. Generally receives orders via mail, phone, fax, or other electronic means. Duties include informing customers of receipt, prices, shipping dates, and delays; preparing contracts; and handling complaints. Excludes "Dispatchers, Except Police, Fire, and Ambulance" (43-5032) who both dispatch and take orders for services.'
      }
    ],
    value: null,
    styles: {
      //container style is working
      marginTop: "2em",
      marginLeft: "2em",
      borderStyle: "solid",
      borderWidth: ".1em",
      borderBottom: "none",
      borderRight: "solid",
      width: "19em",
      textAlign: "justify",
      backgroundColor: "white",
      boxShadow: "3px 6px 5px #9E9E9E"
    },
    className: "",
    selectedClassName: "",
    loading_State: true, //this changes to false when the component loads
    childrenCount: 0
  };

  toggleSelected = child => {
    this.setProps({options.indexOf('1').style.backgroundColor: "gray" })
  };

Component.js

render() {
    return (
      <div style={this.props.styles}>
        {this.props.options.map(option => (
          <div
            key={option}
            id={"option" + option.id}
            style={option.style}
            onClick={e => {
              if (this.props.setProps) {
                this.props.setProps({ value: e.target.value });
              } else {
                this.setState({ value: e.target.value });
              }
              this.props.toggleSelected(option.id); //passing my index here to the function
            }}
          >
            <span id={option.id}> {option.label} </span>
            <UncontrolledTooltip
              placement="right"
              target={"option" + option.id}
            >
              {option.tooltip_text}
            </UncontrolledTooltip>
          </div>
        ))}
      </div>
    );
  }

Am I going about this the right way in terms of updating the styles object here. Should I use a different approach. Also I would like to do this without using CSS so adding classNames is not what I want to do.

What does setProps do. I think you might need to reconsider the app flow. It's kind of complicated to achieve a fairly simple thing. — junwen-k
– junwen-k, Commented Nov 16, 2019 at 17:44

Nick · Accepted Answer · 2019-11-23 02:18:01Z

1

I believe the following should work, assuming childIndex here represents the index of the state.options array that you want to modify.

toggleSelected = (childIndex) => {
  const newOptions = this.state.options.map((option, i) => {
    if (i !== childIndex) {
      return option;
    }
    return {
      ...option,
      style: {
        ...option.style,
        backgroundColor: "green" // your color here
      }
    }
  });

  this.setState({ options: newOptions });
}

Edit: If you need to change all the other colors to white, you can do the following:

toggleSelected = (childIndex) => {
  const newOptions = this.state.options.map((option, i) => {
    return {
      ...option,
      style: {
        ...option.style,
        backgroundColor: i === childIndex ? "green" : "white"
      }
    }
  });

  this.setState({ options: newOptions });
}

edited Nov 23, 2019 at 2:18

answered Nov 16, 2019 at 17:50

Nick

16.7k3 gold badges21 silver badges38 bronze badges

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

5 Comments

monsterpiece Over a year ago

thanks for your answer this works and its easy to understand :) , My only issue is that I only want to update the styles for one of the options not all of them. Could you perhaps provide an edit with the most reasonable way to achieve this?

Nick Over a year ago

This should only update the option corresponding to the provided childIndex. Is this not how it's working?

monsterpiece Over a year ago

Hi, I was able to play around with it and it now works perfectly, I'm not sure exactly what I was doing wrong there for a second. Again thank You!

monsterpiece Over a year ago

hey I know this is an additional nagging question but I was also hoping to ask how I might change only the selected colors background to 'green' while at the same time, changing the background of all the non selected options to 'white'?

monsterpiece Over a year ago

I implemented your solution and it works. The only thing I changed was that I used childIndex.id in my ternary operator :) thanks!

Collectives™ on Stack Overflow

changing style object at index of array in state in react

App.js

Component.js

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

App.js

Component.js

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related