React Hooks: Can't change anything from parent in useEffect() return

Question

I have a component children with a form in which the user can put a tittle, description and images.

This component is on a section of it's parent component, and I wan't that if the user changes of section (by error or only looking) it's form data is stored so when he comes back he won't need to write all again.

I thought about storing everything directly on the parent's state, but every time the user presses a key, it would re-render the whole view.

And I thought about creating a variable in the parent, that when the children with the form is rendered, its state will get it's initial state from that parent's variable, and store the information there when the component is about to unmount in useEffect(()=>{return ()=>{ props.formData = formData } },[])

export default class feedClase extends Component {
    data = {tittle:"", description: "", Blobs: [] }
    render(
      <>
       <FormChild data={data}/>
       <Feed/>
      </>
     )
}

FormChild({data}){
   const [tittle, setTittle] = useState(data.tittle)
   const [description, setDescription] = useState(data.description)
   const [images, setImages] = useState(data.Blobs)

   useEffect(() => {
      return () => {
         data = {Blobs: images, tittle, description}
         //I also tried storing it in the parent's state
         //-> props.setData({Blobs: images, tittle, description}) //setData={d=>this.setState({data: d})}
      }
   }, [])
   
   return(
       ... 
    )
}

But it doesn't changes anything in the parent's variables/state. How could I make it work?

From the object destructuring in FormChild params @SonNguyen — Marcelo Potty, Jun 28 '20 at 08:51

score 1 · Answer 1 · answered Jun 28 '20 at 07:16

You'll want to store your data object inside of state.

export default class feedClase extends Component {
    state = { data = {tittle:"", description: "", Blobs: [] } }
    render(
      <>
       <FormChild data={this.state.data}/>
       <Feed/>
      </>
     )
}

However, there's a couple things I'm noticing in your code that I'd change. You have state in your parent component that gets passed down as props. Then in the child component you're saving that slice of state inside of state. You should avoid keeping two versions of state like that.

Also, it looks like you're trying to update your state in the useEffect hook. I'd recommend writing your handler methods in the same component as state and passing them down as props where needed.

score 1 · Answer 2 · answered Jun 28 '20 at 07:28

You can do this way:-

export default class feedClase extends Component {
data = {tittle:"", description: "", Blobs: [] }
const handleSetData = (obj) => {
    data[obj.key] = obj.value;
}
render(
  <>
   <FormChild data={data} onChange={obj => handleSetData(obj)} />
   <Feed/>
  </>
 )
}

FormChild(props){
   const [tittle, setTittle] = useState(props.data.tittle)
   const [description, setDescription] = useState(props.data.description)
   const [images, setImages] = useState(props.data.Blobs)
   const handleChange = (e) => {
       setTittle(e.target.value);
       props.onChange({key: "tittle", value: e.target.value});
   }
   return(
       <input onChange={e => handleChange(e)} placeholder="tittle" />
       ...
    )
}

React Hooks: Can't change anything from parent in useEffect() return

2 Answers2