5 CRUD Update

 내가 선택한 글에서 Update버튼을 누르면 그 글의 정보를 props에 보내고(data) Update form이 나온다.

 

 거기 input title과 textarea의 value값에 this.props.data.title, this.props.data.desc를 적으면 콘솔창에 오류가 뜨면서 값이 변경이 되지 않는다.

 

확인 해보면 onChange 이벤트를 사용하라는 메시지가 나온다. onChange이벤트를 사용하면 어떠한 단어를 적더라도 바로 이벤트가 발동이 되어버려 아무것도 할 수가 없게된다.

 

UpdateContent에 state를 만들고 그 state안에 title과 desc의 값이 바뀔 때마다 저장하는 형식으로 만들면 이 문제를 해결 할 수있다.

 

여기서 가독성을 높이기 위해 함수로 만들었다.

this.setState({ [e.target.name] : e.target.value})을 해주면 e.target.name을 통해서 title과 desc가 있는데 두 곳에 모두 적용 시킬 수 가있다. js최신문법

 

이제 Update form을 submit했을때 APP state에 저장이 되도록 하는 것이 문제이다. newCon이라는 객체를 만들고 함수의 매개변수로 보내보자 Array.from을 통하여 복제본을 생성하고 거기에 newCon의 id와 일치하는 글을 찾아서 업데이트를 해준다!