Unable to add data from form to variable using REACT

Question

We're trying to set up a data entry form that adds input to an object in mongo. We're positive this has to do with our front end as we can't get the input data to even print to an alert.

import { Panel, Button,ButtonToolbar} from 'react-bootstrap';

export default class ResearcherPortal extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            schoolName: '',
            studyName: '',
            studyDescription: '',
            identifier: '',
            numberOfConsenting: null,
            numberOfNonconsenting: null
        },

        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleSubmit(event){
        this.setState({numberOfConsenting: event.target.value});
        alert(this.state.numberOfConsenting);
    }
    render() {
        return (
            <div className="jumbotron">
                <div className="container ">
                    <div className ="row justify-content-md-center">
                        <Panel bsStyle="primary">
                            <Panel.Heading>
                                <h2>Researcher Portal</h2>
                            </Panel.Heading>
                            <Panel.Body>
                                <form id="Account Creation" action={"/researcherPortal"} method="POST">
                                    <div className="form-group">
                                        <input type="text" className="form-control" id="schoolName" placeholder="School Name"/>
                                    </div>
                                    <div className="form-group">
                                        <input type="text" className="form-control" id="studyName" placeholder="Study Name"/>
                                    </div>
                                    <div className="form-group">
                                        <input type="text" className="form-control" id="studyDescription" placeholder="Study Description"/>
                                    </div>
                                    <div className="form-group">
                                        <input type="text" className="form-control" id="identifier" placeholder="Unique Identifier"/>
                                    </div>
                                    <div className="form-group">
                                        <input type="text" className="form-control" id="numberOfConsenting" placeholder="Number of Consenting Students" value={this.state.numberOfConsenting}/>
                                    </div>
                                    <div className="form-group">
                                        <input type="text" className="form-control" id="numberOfNonconsenting" placeholder="Number of Nonconsenting Students"/>
                                    </div>
                                    <Button type="submit" className="btn btn-primary" onClick={this.handleSubmit.bind(this)}>Create Accounts</Button>
                                </form>
                            </Panel.Body>
                        </Panel>
                    </div>
                </div>
            </div>

        );
    }
}

Expected result is the input for "Number of Consenting Students", however we are just outputting the initial constructor value.

You should connect these input to the state. <input .... value={this.state.yourVariable} onChange={(e) => this.setState({yourVariable: e.target.value}) /> — Julian Schlickmann
– Julian Schlickmann, Commented Jun 20, 2019 at 18:06

larz · Accepted Answer · 2019-06-20 18:00:44Z

2

You need to provide an onChange to the input whose value is this.state.numberOfConsenting. Something like -

changeNumberOfConsenting(event) {
    this.setState({ numberOfConsenting: event.target.value });
}

...

<input ... value={this.state.numberOfConsenting} onChange={this.changeNumberOfConsenting} />

and then bind it in your constructor like you did for handleSubmit.

answered Jun 20, 2019 at 18:00

larz

5,7662 gold badges13 silver badges23 bronze badges

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

1 Comment

evilmisterspock Over a year ago

That did it! Thank you so much.

user11483010 · Accepted Answer · 2019-06-20 18:25:26Z

1

Use refs.

Add handler to constructor:

this.consentingStudents = React.createRef();

Add this ref for needed input:

<input type="text" className="form-control" id="numberOfConsenting" placeholder="Number of Consenting Students" ref={this.consentingStudents} value={this.state.numberOfConsenting} />

And get its value in the handleSubmit():

 handleSubmit(event) {
    this.setState({ numberOfConsenting: this.consentingStudents.current.value });
    alert(this.consentingStudents.current.value);
}

answered Jun 20, 2019 at 18:25

user11483010

1 Comment

Tobias Tengler Over a year ago

No, this is definitely NOT what he should do. You should generally avoid ref, unless you need to access DOM element specific functions. Using ref defeats the whole purpose of react.

Collectives™ on Stack Overflow

Unable to add data from form to variable using REACT

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related