использование дочернего текста элемента для установки / обновления переменной

Question

Кто-нибудь знает, что я мог бы использовать для своих элементов <li> в следующем компоненте, чтобы при щелчке по одному из элементов <li> в файле ActivityType был установлен текст, содержащийся в этом конкретном <li>? Например, первым <li> является «Образование». Нажав на это, я бы хотел, чтобы это произошло: setActivityType ('education').

Кто-нибудь знает, что я могу сделать с моими <li> элементами в следующем компоненте, чтобы щелкнуть по одному из <li> s установит activityType на текст, содержащийся в конкретном <li>? Например, первый <li> - «Образование». Нажмите на этот, я бы хотел, чтобы это произошло: setActivityType('education')

TypeMenu. js:

import React, { useState } from "react";

const TypeMenu = () => {
    const [activityType, setActivityType] = useState('');

    return (
        <div>
            <h2>Please select an activity type:</h2>
            <ul>
                <li>Education</li>
                <li>Recreational</li>
                <li>Social</li>
                <li>DIY</li>
                <li>Charity</li>
                <li>Cooking</li>
                <li>Relaxation</li>
                <li>Music</li>
                <li>Busywork</li>
            </ul>
        </div>
    )
}

export default TypeMenu;

ОБНОВЛЕНИЕ:

Я воспользовался данным советом и поместил дочерний текст для каждого элемента <li> в массив. Затем я сопоставил этот массив для создания отдельных <li>, предоставляя каждому onClick, который в идеале установил бы activityType в текст из <li>, на который я нажимаю. Затем я хочу сделать вызов API на основе того, что activityType динамически установлено. С помощью приведенного ниже кода я приблизился к решению этой проблемы, но я все еще не могу контролировать / обновлять activityType с кодом как есть. Этот const возвращается как пустая строка, которая отбрасывает мой вызов API. Есть предложения?

TypeMenu. js:

import React, { useState } from "react";
import { connect } from "react-redux";

import { getActivityByType } from "../actions";

const TypeMenu = props => {
    const [activityType, setActivityType] = useState('');

    const activityArr = [
        'Education',
        'Recreational',
        'Social',
        'DIY',
        'Charity',
        'Cooking',
        'Relaxation',
        'Music',
        'Busywork'
    ];

    const returnActivity = (t) => {
        setActivityType(t.toLowerCase());
        props.getActivityByType(activityType);
    }

    console.log(activityType);

    return (
        <div>
            <h2>Please select an activity type:</h2>
            <ul>
                {activityArr.map(type => (
                    <li key={type} onClick={() => returnActivity(type)}>{type}</li>
                ))}
            </ul>
        </div>
    )
}

export default connect(null, { getActivityByType })(TypeMenu);

Answer 1

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

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

const activityTypes = [
  'Education',
  'Recreational',
  ... // etc
]

const TypeMenu = () => {
  const [activityType, setActivityType] = useState('');

  return (
    <div>
      <h2>Please select an activity type:</h2>
      <ul>
        {activityTypes.map(t => (
          <li onClick={() => setActivityType(t)}>{t}</li>
         ))}
      </ul>
    </div>
  )
}

Обновление:

Измените props.getActivityByType(activityType) на props.getActivityByType(t). Состояние не изменяется до следующего рендеринга, поэтому значение activityType остается прежним значением.