How can I update state as an array of objects without overriding previous state

Question

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);

Andy · Accepted Answer · 2021-11-06 14:12:36Z

1

Instead of the child component using state lift the state to a parent component, and then just create dumb Topic components from the state.
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.
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, category }) {
  return <div>{subject}: {category}</div>;
}

function Example() {

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

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

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

  // Helper function to add a new topic object
  // to the topics state
  function addTopic() {
    const obj = { subject: 'Math', category: '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>

edited Nov 6, 2021 at 14:12

answered Nov 6, 2021 at 13:25

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gourav Thakur Over a year ago

Here's what I want to do. I have subjects e.g., Mathematics, biology etc. When a user click a subject subjectName is updated. Now, I want to add topics related to this subectName. That's why I have an array of objects that contains subjectName. How can I use only array to store id, topicName as well as subjectName. there will be multiple such topics. What is the best way to do this.

Andy Over a year ago

You're making things too complicated. Just add new topics to the array that have properties that define them: { subject: 'Math', topic: 'Algebra' } or { subject: 'Biology, topic: 'Fish' }. You can then filter on those array objects however you want.

k-wasilewski · Accepted Answer · 2021-11-06 13:38:36Z

0

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.

edited Nov 6, 2021 at 13:38

answered Nov 6, 2021 at 13:22

k-wasilewski

4,6914 gold badges18 silver badges39 bronze badges

2 Comments

Gourav Thakur Over a year ago

I already tried it. TypeError: topic.topics is not iterable.

Gourav Thakur Over a year ago

doesn't work. Same problem.

Collectives™ on Stack Overflow

How can I update state as an array of objects without overriding previous state

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related