how to edit json attribute without manipulating state

Question

say I have a json object like so called student:

{id: 1, 
 name: jon,
 hobbies:[running, basketball, soccer]
} 

Without mutating state, I want to edit the hobbies array so that each element is a Hobby model. So basically iterate through each element in student.hobbies and call new Hobby(element) on each element. How can I do this without mutating state?

Answer 1

You can map() over the hobbies and use each value to create a Hobby object, code could look something like this.

const [student, setStudent] = useState();

useEffect(() => {
  fetch("url").then(res => res.json()).then(data => {
    // imagine data is { id: 1, name: "jon", hobbies: ["running", "basketball", "soccer"] }
    setStudent({
      ...data,
      hobbies: data.hobbies.map(h => new Hobby(h))
    });
  });  
}, []);