Не могу получить значение тега <li>в моей функции обработчика

Question

CusineList печатает 0 при каждом щелчке. Не могу получить значение в моем теге li.

Я пытался передать cussine в свое updateMenu, но вывод неправильный. Когда я нажимаю Все, он печатает арабский язык.

Вот мой код

class Menu extends Component {
  state={
    cusineList: "All"
  }
  updateMenu = (e) => {
    this.setState( {cusineList: e.target.value} );
    console.log(this.state.cusineList);  
  }
    render() {
      const cusineArray = ["All",
         "Arabian",
         "Continental", 
         "Italian", 
         "Indian"];
      let cusines = (
        <ul className="cusine-list">
        { cusineArray.map(cusine =>
             li key={cusine} onClick={(e)=>this.updateMenu(e)}>
                   {cusine}
             </li>
        )}
      </ul>
      );
        return (
         <div>{cusine}</div>
    }
}
export default Menu;

Я хочу обновить состояние в соответствии с выбранным элементом

Answer 1

Тег

<li/> не имеет значения свойства. Обновите код с помощью

  updateMenu = (e) => {
    this.setState( {cusineList: e.target.innerHTML}, () => {
      console.log(this.state.cusineList)
    });
  }

Вот slackblitz . innerHTML получит весь текст html + внутри тега <li>. В качестве альтернативы просто для получения текста, в этом случае вы также можете использовать textContent, как предложено @ Kejt

Answer 2

Посмотрите, ищите ли вы это:

class Menu extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      cusineList: "All"
    };
  }
  
  updateMenu = (selectedCusine) => {
    console.log(selectedCusine + ' has been selected!');  
    this.setState( {cusineList: selectedCusine} );
  };
  
  render() {
    
    const cusineArray = ["All",
      "Arabian",
      "Continental", 
      "Italian", 
      "Indian"
    ];

    const cusineItems = cusineArray.map(cusine =>
      <li key={cusine} className='cusineItem' onClick={()=>this.updateMenu(cusine)}>
        {cusine}
      </li>
    );
    
    return (
      <div>
        <ul className="cusine-list">
          {cusineItems}
        </ul>
        <div>Selected cusine is: {this.state.cusineList}</div>
      </div>
    );
  }
}

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

.cusineItem {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

Answer 3

this.setState () не является синхронным, попробуйте:

this.setState({ cusineList: e.target.value }, () => console.log(this.state.cusineList));

Answer 4

Конечно, поскольку li не имеет значения.Попробуйте использовать e.target.textContent

для справки - https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_node_textcontent