如何在 Reactjs 中正确使用条件语句和内联 styles？

Question

I am building a pizza builder react application. An application where users can build pizzas in real-time and order them. I am trying to set some conditional styles based on the state and the input Handler but my styles are not being applied.

This is my JSX code

class PizzaBuilder extends Component {
  state = {
    sauce: {
      selected: 'Marinara'
    }
  }
  toggleSauceHandler = (type) => () => {
    this.setState({
      toggle: type
    });
  }
  render() {
    return (
      <div className={styles.Sauce}>
        <div>
          <img style={this.state.toggle==="Marinara" ? {display: 'block', position: 'absolute', zIndex: '100'}: null} src={Marinara} alt="marinara" />
        </div>
      </div>
      <div>
        <input type="radio" name="sauce" id="Marinara" value="Marinara" onChange={this.toggleSauceHandler( "Marinara")} checked={this.state.toggle==="Marinara" }/>
        <label for="Marinara">Marinara</label>
      </div>
    )
  }
}

The Sauce itself is set to display none as I do not need the images showing on the page. I only want to show the one by one based on the input from the radio button.

Answer 1

Check below link, may be helpful for you.

React - Change Inline CSS Conditionally Based on Component State