Как сделать так, чтобы в зависимости от выбора был виден только один абзац?

Question

[Kirr07]

Дан селект и 3 абзаца. В селекте можно выбрать один из трех пунктов. Нужно сделать так, чтобы в зависимости от выбора на экране был виден один из трех абзацев.

state = {
          value: 0,
          options: [ '1', '2', '3' ],
        }
        render() {
          const { value, options } = this.state;
        
          return (
            <div>
              <select>
                {options.map((n, i) => <option value={i}>{n}</option>)}
              </select>
              <br />
              <p style={{opacity: 0}}>1 text</p>
              <p style={{opacity: 0}}>2 text</p>
              <p style={{opacity: 0}}>3 text</p>
            </div>
          );
          }

Answer 1

[Чипекве]

В state нужно добавить значение, в котором будет указан текущий выбранный элемент.
В зависимости от этого значения показывать нужный абзац.

При изменении в select менять это значение в state.