Form (react component) is unusable after submission and refresh via websockets

Question

I'm not sure if this is a react problem, or more generic. I have a React application with a parent component which connects to a socketsio server to send/receive a JSON. The JSON is broken up into smaller JSON, which are then passed to child components which generate forms(FormA/FormB). The parent component also passes to the children, a handleSubmit method, so that when either form is submitted, the entire JSON is sent to the websockets server.

With two browsers open, upon a submit, I can see the new JSON information being received and passed to the child components - and each component/form updates. However, upon this update, I am subsequently unable to interact with the form (checkboxes and drop downs). However, I am still able to submit the same form.

Excuse the pseudo code. My application is actualy a bit more complex and my child components are actually nested 3 times as the JSON is broken up various times. The handleSumbit is passed all the way down. I am new to js/html and React so what i'm wondering is if there are known reasons that would cause the form to be unusable, so I can troubleshoot my code from there.

class Parent extends Component 
    constructor() {
    super()
    this.state = {
        data: [],
        socket: null,
    }
 }

 handleSubmit = (event) => {
    event.preventDefault()
    this.state.socket.emit("messageOut", this.state.data)
}

componentDidMount() {
    this.props.socket.on('messageIn', (msg) => {
        this.setState({
            data: msg
        })
    })

    this.setState({
        socket: this.props.socket
    })
}

handlChange() {
    //handle changes to form for child components
}

render() {
    return (
        //form A props.data = this.state.data[0], props.handleSubmit = this.handleSubmit
        //Form B props.data = this.state.data[1], props.handleSubmit =      this.handleSubmit
        )
    }
}
class Form extends Component {
render() {
    return (
        <form onSubmit={this.props.handleSubmit} >
            {this.props.data.map((item) =>
               <input value = item.value name = item.name onChange = this.props.handleChange>
            }
        </form>
    )
}

The Forms are essentially the same ( there is logic in there to handle checkbox vs select). And this seems to be a slightly more complex version of the basic chatroom app on socketsio. Without the sockets, and pure handleChanges, I can interact with the form non stop. However my form seems to lock up whenever I receive a new JSON over sockets.

Answer 1

Your form input does not have a value attribute. The value should be using the state data which is should be set by your handleChange function. Is the form input responsive even before submit?

<input value={this.state.someStateField} onChange = {() => this.props.handleChange(e)>

Answer 2

I fixed two issues. One was that all my child components and elements did not all have unique keys. This didn't fix my issue however I understand it is not just best practice but can cause unexpected behavior when react updates the DOM.

My bigger issue was that I was generating the child form inputs using the passed in props. This is why the forms did update visually when I submitted. However what I should have been doing was using the state of parent to generate the child forms. I used componentDidUpdate to then keep the state up to date when receiving a new JSON