Как визуализировать элемент зависит от выбранной опции?

Question

Я новичок в реакции JS, и я хочу иметь форму с опциями выбора. Я хочу, чтобы, когда пользователь нажимал на каждую опцию, каждая опция отображала различные элементы

class Resepy extends Component {
    state = {
        Resepy : 'default'
    }
    render() { 
        
       return = (
            <div className="Resepy">

            
            <form>
            <select id="id_field1" name="field1" onChange={(e) => this.state.Resepy = "Burger"}>
                <option value="default">Food type not selected</option>
                <option value="burger" onClick={(e) => this.setState({  Resepy: 'Burger'  })}>Burger</option>
                <option value="pizza"  onClick={(e) => this.setState({  Resepy: 'Pizza'  })}>Pizza</option>
                </select>
                <div className="food">
                { this.state.Resepy === "burger" ? <div className="burger"></div> //can return any html
                     : <div className="default">default</div>
                    }
                <div className="pizza"></div>
                <div className="food-detail"></div>
                </div>
                <button type="submit">Add to tray</button>
                </form>
            </div>
        );
}
}
 
export default Resepy;

Answer 1

Мне трудно вас понять, но, скорее всего, вы могли бы попытаться добиться с помощью следующего кода из исходного вопроса:

<div className="burger" Resepy={this.state.Resepy === 'burger'}></div>

это:

<div className="food">
  <div className={this.state.Resepy} />
</div>

Рабочий пример (но я использую крючки вместо компонента класса):

const App = () => {
  const [selected, setSelected] = React.useState('default')
  
  const handleChange = (event) => {
    setSelected(event.target.value)
  }
  
  return (
    <div>
      <select value={selected} onChange={handleChange}>
        <option>default</option>
        <option>burger</option>
        <option>pizza</option>
      </select>
      <div className="food">
        <div className={selected}>{selected}</div>
      </div>
    </div>
  )
}


ReactDOM.render(<App />, document.getElementById('root'))

.default { color: gray; }
.burger { color: orange; }
.pizza { color: red; }

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

Answer 2

Теперь я хочу, чтобы рендеринг html-элементов зависел от значений, я пробовал это, но он показывает только [Object Object]

  setSelected = (event) => {
      let select = document.getElementById("id_field1");
      document.getElementById("food").innerHTML =          
                        select.value == "default" ? 
                       <div className="default">Default</div>
                       : select.value == "Burger" ?
                        <div className="burger">Burger</div>
                         : <div className="pizza">Pizza</div>
                  
  }

Answer 3

Общий троичный оператор, используемый для более удобочитаемого кода.

Примерно так:

<form>//can be any element
 { codition == true ? <div>It is true</div> //can return any html
                     : <div>It is false</div>
}
</form>

Проверено, работает. Проблема была в том, что опция метода onClick не может вызвать это событие.

class Resepy extends React.Component {
  constructor(props){
    super(props);
    this.state = {
        selected : 'default'
    };
  }

  setSelected = (event) => {
      let select = document.getElementById("id_field1");
    this.setState({selected: select.value});
      //document.getElementById("test").innerHTML = select.value;
  }

  render() { 
       return (
            <div className="Resepy">
             <h1>Something</h1>
             <form>
              <select id="id_field1" name="field1" onChange={this.setSelected}>
                  <option value="default">Food type not selected</option>
                  <option value="burger">Burger</option>
                  <option value="pizza">Pizza</option>
                  </select>
                <div id="test"></div>
                  <div className="food">{
                   (this.state.selected === "default") ? 
                       <div className="default">Default</div>
                       : (this.state.selected === "burger") ?
                        <div className="burger">Burger</div>
                         : <div className="pizza">Pizza</div>
                  }</div>
                  <button type="submit">Add to tray</button>
                  </form>
             </div>
        );
  }
}