I want to update setTopic without overriding previous state. But I am getting topic is not iterable error.

What I tried? I tried looking a different examples on stack overflow, But still couldn't figure out how to append updated state without losing previous state.

Also, which is a better way to save multiple topics : an array of objects, simply objects or simply array?

const AddTopic = (props) => {
  const { subjectName } = props;
  const [topic, setTopic] = useState([
    {
      topics: [
        {
          id: Math.random().toString(36).substr(2, 7),
          topicName: "topic name",
          subject: subjectName,
        },
      ],
    },
  ]);

  const addTopicHandler = () => {

    setTopic(
      [...topic].map((item) => {
        return {
          ...item,
          id: Math.random().toString(36).substr(2, 7),
          topicName: "another topic name",
          subject: subjectName,
        };
      })
    );
  };
  console.log(topic);

CodePudding user response：

1. Instead of the child component using state lift the state to a parent component, and then just create dumb components from the state.

2. Rename your state. Call it topics, and the update function setTopics. Initialise it as an array, not an array containing one object containing an array.

3. You can't immediately log an updated state. You need to use useEffect to watch for changes in state, and then log something.

const { useEffect, useState } = React;

// Topic component - just gets handed the
// subject (in this example) in the props
function Topic({ subject }) {
  return <div>{subject}</div>;
}

function Example() {

  // Initialise `topics` as an array
  const [ topics, setTopics ] = useState([]);

  // When `topics` is updated, log the updated state
  useEffect(() => console.log(topics), [topics]);

  // Helper function that maps over the state and
  // produces an array of topics
  function getTopics() {
    return topics.map(topic => <Topic subject={topic.subject} />);
  }

  // Helper function to add a new topic object
  // to the topics state
  function addTopic() {
    const obj = { subject: 'Math', topic: 'Fish' };
    setTopics([...topics, obj ]);
  }

  return (
    <div>
      <div>{getTopics()}</div>
      <button onClick={addTopic}>Add topic</button>
    </div>
  );
};

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

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

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Try to replace [...topic].map with [...topic.topics].map.

edit Sorry, I didn't see that the topic itself is an arr of objs, so it should be: [...topic[0].topics].map.