React Forms (w / Hooks): Как создать динамическое c имя. и значение для компонента TextArea

Question

Я создал форму, где каждое поле основано на часах и времени суток; В этот момент, когда я ввожу информацию, скажем, в 12:00, и отправляю ее, она распространяется для каждой области сообщения.

Это мой handleChange и Функции handleClick:

  function handleChange(e) {
    e.persist();
    setInputValue({
      ...inputValue,
      [e.target.name]: e.target.value,
    });
    setFormValue({
      ...formValue,
      [e.target.name]: e.target.value,
    });
  }


  function handleClick(timeOfDayAndHour, index) {
    setTimeOfDay(timeOfDayAndHour);
    addMessageToDateAutoCreateEverythingElse(
      dayInfoInChild,
      currentDate,
      timeOfDayAndHour,
      inputValue,
      index
    );
    formValue[timeOfDayAndHour] = '';
  }

И это возвращаемое значение моей формы:

return (
    <>
      <h1>{dayInfo}</h1>
      <Table celled={true} structured>
        <Table.Body>
          {Array.from(Array(amountOfRows)).map((row, index) => {
            return (
              <React.Fragment key={index}>
                <Table.Row>
                  <Table.Cell rowSpan="2" style={tableStyle}>
                    {TimeOfDaySetter(index, undefined)}
                  </Table.Cell>
                  <Table.Cell style={tableStyle}>
                    {
                      <strong>
                        {setExactHourHelper(index)}
                        :00
                      </strong>
                    }
                    <Message>
                      <ul>
                        {message.map((todo, index) => (
                          <li key={`${index}${TimeOfDaySetter(index, {})}`}>
                            {console.log('timeOfDay ', timeOfDay)}
                            {todo[index][timeOfDay]}
                          </li>
                        ))}
                      </ul>
                    </Message>

                    <TextArea
                      rows={2}
                      name={
                        setExactHourHelper(index) +
                        ':00' +
                        TimeOfDaySetter(index, {}) +
                        '-textarea'
                      }
                      value={
                        formValue[
                          setExactHourHelper(index) +
                            ':00' +
                            TimeOfDaySetter(index, {}) +
                            '-textarea'
                        ]
                      }
                      onChange={(e) => handleChange(e)}
                      placeholder="Tell us more"
                    />
                    <Button
                      fluid
                      attached="bottom"
                      content="submit"
                      onClick={(e) => {
                        handleClick(
                          setExactHourHelper(index) +
                            ':00' +
                            TimeOfDaySetter(index, 'a') +
                            '-textarea',
                          index
                        );
                      }}
                    />
                  </Table.Cell>
                </Table.Row>
                <Table.Row>
                  <Table.Cell style={(tableStyle, colorOveride)}>
                    {
                      <strong>
                        {setExactHourHelper(index)}
                        :30
                      </strong>
                    }
                    <Message>
                      <ul>
                        {message.map((todo, index) => (
                          <li>{todo[index][timeOfDay]}</li>
                        ))}
                      </ul>
                    </Message>

                    <TextArea
                      rows={2}
                      name={
                        setExactHourHelper(index) +
                        ':30' +
                        TimeOfDaySetter(index, {}) +
                        '-textarea'
                      }
                      value={
                        formValue[
                          setExactHourHelper(index) +
                            ':30' +
                            TimeOfDaySetter(index, {}) +
                            '-textarea'
                        ]
                      }
                      onChange={(e) => handleChange(e)}
                      placeholder="Tell us more"
                    />
                    <Button
                      fluid
                      attached="bottom"
                      content="submit"
                      onClick={(e) => {
                        handleClick(
                          setExactHourHelper(index) +
                            ':30' +
                            TimeOfDaySetter(index, 'a') +
                            '-textarea',
                          index
                        );
                      }} // onKeyPress={this.handleKeyPress}
                    />
                  </Table.Cell>
                </Table.Row>
              </React.Fragment>
            );
          })}
        </Table.Body>
      </Table>
    </>
 )

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

                 <Message>
                  <ul>
                    {message.map((todo, index) => (
                      <li key={`${index}${TimeOfDaySetter(index, {})}`}>
                        {console.log('timeOfDay ', timeOfDay)}
                        {todo[index][timeOfDay]}
                      </li>
                    ))}
                  </ul>
                </Message>

Это полный компонент:

import { Button, Header, Message, Table, TextArea } from 'semantic-ui-react';
import React, { useState, useEffect, useCallback } from 'react';

export default function Day({ dayInfo }) {
  var [dayInfoInChild, setDayInfoInChild] = useState({});
  var [currentDate, setCurrentDate] = useState('');
  var [timeOfDay, setTimeOfDay] = useState('');
  var [amountOfRows, setAmountOfRows] = useState(24);
  var [message, setMessage] = useState([]);
  var [inputValue, setInputValue] = useState({});
  var [formValue, setFormValue] = useState('');

  function handleChange(e) {
    console.log(`e.target.name`, e.target.name);
    console.log(`e.target.value`, e.target.value);
    e.persist();
    setInputValue({
      ...inputValue,
      [e.target.name]: e.target.value,
    });
    setFormValue({
      ...formValue,
      [e.target.name]: e.target.value,
    });
  }

  function randomStringGenerator() {
    return (
      Math.random().toString(36).substring(2, 15) +
      Math.random().toString(36).substring(2, 15)
    );
  }

  function handleClick(timeOfDayAndHour, index) {
    console.log('index ', index);
    setTimeOfDay(timeOfDayAndHour);
    addMessageToDateAutoCreateEverythingElse(
      dayInfoInChild,
      currentDate,
      timeOfDayAndHour,
      inputValue,
      index
    );
    formValue[timeOfDayAndHour] = '';
    console.log('dayInfoInChild', dayInfoInChild);
  }

  function setExactHourHelper(index) {
    return index === 0 ? 12 : '' || index > 12 ? index - 12 : index;
  }

  function TimeOfDaySetter(index) {
    if (index === 0 && arguments[1] === undefined) {
      return <Header as="h1">AM</Header>;
    } else if (index === 12 && arguments[1] === undefined) {
      return <Header as="h1">PM</Header>;
    }
    if (index < 12 && arguments[1] !== undefined) {
      return 'AM';
    } else if (index >= 12 && arguments[1] !== undefined) {
      return 'PM';
    }
  }

  function addMessageToDateAutoCreateEverythingElse(
    obj,
    date,
    time,
    txt,
    index
  ) {
    let dateObj = obj[date];

    // Checking date exist:
    if (dateObj) {
      let timeObj = dateObj[time];

      // Auto-create time if not exist
      if (!timeObj) {
        timeObj = {};
        dateObj[time] = timeObj;
      }

      // Auto-create message array if not exist
      if (!timeObj.message) {
        timeObj.message = [];
      }

      // Add new message
      timeObj.message = [...timeObj.message, txt];

      setMessage((message) => [...message, timeObj.message]);
    }
  }

  useEffect(() => {
    if (dayInfo !== null) {
      var modifiedDayInfo = dayInfo
        .split(' ')
        .map((item) => {
          if (item.indexOf(',')) return item.replace(/,/g, '');
        })
        .join('-');

      setCurrentDate(modifiedDayInfo);

      if (localStorage.getItem(modifiedDayInfo)) {
        var stringVersionOfModifiedDayInfo = modifiedDayInfo;

        modifiedDayInfo = JSON.parse(localStorage.getItem(modifiedDayInfo));

        if (!dayInfoInChild.hasOwnProperty(stringVersionOfModifiedDayInfo)) {
          setDayInfoInChild({
            ...dayInfoInChild,
            [stringVersionOfModifiedDayInfo]: modifiedDayInfo,
          });
        }
      } else {
        localStorage.setItem(modifiedDayInfo, JSON.stringify({}));
      }
    }
  }, [dayInfo, inputValue]);

  useEffect(() => {
    console.log('dayInfoInChild ', dayInfoInChild);
  }, []);

  const tableStyle = {
    borderLeft: 0,
    borderRight: 0,
  };

  const colorOveride = {
    color: '#C1BDBD',
  };
  return (
    <>
      <h1>{dayInfo}</h1>
      <Table celled={true} structured>
        <Table.Body>
          {Array.from(Array(amountOfRows)).map((row, index) => {
            return (
              <React.Fragment key={index}>
                <Table.Row>
                  <Table.Cell rowSpan="2" style={tableStyle}>
                    {TimeOfDaySetter(index, undefined)}
                  </Table.Cell>
                  <Table.Cell style={tableStyle}>
                    {
                      <strong>
                        {setExactHourHelper(index)}
                        :00
                      </strong>
                    }
                    <Message>
                      <ul>
                        {message.map((todo, index) => (
                          <li key={`${index}${TimeOfDaySetter(index, {})}`}>
                            {console.log('timeOfDay ', timeOfDay)}
                            {todo[index][timeOfDay]}
                          </li>
                        ))}
                      </ul>
                    </Message>

                    <TextArea
                      rows={2}
                      name={
                        setExactHourHelper(index) +
                        ':00' +
                        TimeOfDaySetter(index, {}) +
                        '-textarea'
                      }
                      value={
                        formValue[
                          setExactHourHelper(index) +
                            ':00' +
                            TimeOfDaySetter(index, {}) +
                            '-textarea'
                        ]
                      }
                      onChange={(e) => handleChange(e)}
                      placeholder="Tell us more"
                    />
                    <Button
                      fluid
                      attached="bottom"
                      content="submit"
                      onClick={(e) => {
                        handleClick(
                          setExactHourHelper(index) +
                            ':00' +
                            TimeOfDaySetter(index, 'a') +
                            '-textarea',
                          index
                        );
                      }}
                    />
                  </Table.Cell>
                </Table.Row>
                <Table.Row>
                  <Table.Cell style={(tableStyle, colorOveride)}>
                    {
                      <strong>
                        {setExactHourHelper(index)}
                        :30
                      </strong>
                    }
                    <Message>
                      <ul>
                        {message.map((todo, index) => (
                          <li>{todo[index][timeOfDay]}</li>
                        ))}
                      </ul>
                    </Message>

                    <TextArea
                      rows={2}
                      name={
                        setExactHourHelper(index) +
                        ':30' +
                        TimeOfDaySetter(index, {}) +
                        '-textarea'
                      }
                      value={
                        formValue[
                          setExactHourHelper(index) +
                            ':30' +
                            TimeOfDaySetter(index, {}) +
                            '-textarea'
                        ]
                      }
                      onChange={(e) => handleChange(e)}
                      placeholder="Tell us more"
                    />
                    <Button
                      fluid
                      attached="bottom"
                      content="submit"
                      onClick={(e) => {
                        handleClick(
                          setExactHourHelper(index) +
                            ':30' +
                            TimeOfDaySetter(index, 'a') +
                            '-textarea',
                          index
                        );
                      }} // onKeyPress={this.handleKeyPress}
                    />
                  </Table.Cell>
                </Table.Row>
              </React.Fragment>
            );
          })}
        </Table.Body>
      </Table>
    </>
  );
}

Любая помощь будет оценена!