Develop Reference

React use a form in a modal to pass the inputted data to a function

I am using react-bootstrap/Modal and react-hook-form. I want the user to insert data in the input which after submitting will go to the function where I want to make an object with it.
<form onSubmit={handleSubmit(update)}>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Edit</Modal.Title>
</Modal.Header>
<Modal.Body>
<label>Description</label>
<input name="message" type="text" ref={register} placeholder="description"/>
</Modal.Body>
<Modal.Footer>
<button variant="secondary" onClick={handleClose}>
Cancel
</button>
<button type="submit" variant="primary" onClick={update}>
Edit
</button>
</Modal.Footer>
</Modal>
</form>
//I will need the async function later to await an api call.
const update = (data) => {
(async () => {
console.log("data", data)
})()
}
Thanks for helping!
EDIT:
I found the solution, I had to put the form in the modal but outside the modal components.
<Modal show={show} onHide={handleClose}>
<form onSubmit={handleSubmit(update)}>
<Modal.Header closeButton>
<Modal.Title>Edit</Modal.Title>
</Modal.Header>
<Modal.Body>
<label>Description</label>
<input name="message" type="text" placeholder="description" />
</Modal.Body>
<Modal.Footer>
<button variant="secondary" onClick={handleClose}>
Cancel
</button>
<button type="submit" variant="primary" onClick={update}>
Edit
</button>
</Modal.Footer>
</form>
</Modal>

Since you are using the react-hook-forms, simply can get the result after form submission.
The result object looks like this in your case:
{message: "some message data"}
So, you need to get the "message" property of data parameter on update function.
Note: you pass message as the name property of your input element so the data.message will give you the corresponding data on input element which is controlled by react-hook-forms
const update = (data) => {
(async () => {
console.log("data", data.message)
})()
}

Adjacent JSX elements must be wrapped in an enclosing tag error, when it wrapped in a closing tag

return (
<form className={classes.root} noValidate autoComplete="off">
{Object.keys(fields).map(key => (
<FormControl key={key} className={classes.formControl}>
<TextField className={classes.textField} value={fields[key].type} />
<IconButton
aria-label={`Remove ${fields[key].type} field`}
className={classes.button}
onClick={() => deleteField(value, key, onChange)}
>
<ClearIcon />
</IconButton>
</FormControl>
<div></div>
))}
</form>
);
Anything entered after the FormControl gives me this error, be it this example div or anything more complex. I can render anything inside the FormControl tags, but the moment it's moved out or anything else outside of them gets this error.

Assuming that the <div></div> segment after the <FormControl /> is there for a reason, you will need to wrap the return with React Fragments. This is used to group the elements within the Array.map() callback
{Object.keys(fields).map(key => (
<>
<FormControl key={key} className={classes.formControl}>
<TextField className={classes.textField} value={fields[key].type} />
<IconButton
aria-label={`Remove ${fields[key].type} field`}
className={classes.button}
onClick={() => deleteField(value, key, onChange)}
>
<ClearIcon />
</IconButton>
</FormControl>
<div></div>
</>
))}

I think you should remove <div></div> from after <FormControl />. And your code will work perfectly fine.

Clear all form fields at once, reactjs

I want to clear all fields on click of reset button in the form. How can I
do it using state? I am using material ui theme. I dont want to set states
individually. Is that possible?
<form className={classes.form}>
<FormControl margin="normal" required fullWidth>
<InputLabel htmlFor="Name">Name</InputLabel>
<Input id="name" name="name" autoComplete="name" autoFocus />
</FormControl>
<div className ='switchdesign'>
<FormControlLabel required
label="Private ? "
labelPlacement="start"
control={
<Switch
checked={this.state.checkedA}
onChange={this.handleChange('checkedA')}
value="checkedA" />
} />
</div>
<div className ='switchdesign'>
<FormControl className={classes.formControl}>
<Select
labelPlacement="start"
value={this.state.age}
onChange={this.onhandleChange}
name="tenant"
displayEmpty
className={classes.selectEmpty}
>
<MenuItem value="" disabled>
Choose Option
</MenuItem>
<MenuItem value="a">A</MenuItem>
<MenuItem value="b">B</MenuItem>
<MenuItem value="c">C</MenuItem>
</Select>
<FormHelperText>Tenant</FormHelperText>
</FormControl>
</div>
<Button
type="reset"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Reset
</Button>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Submit
</Button>
</form>
Do I need to compulsorily use refs? is this a better approach? or using
states is better?

You can do it by set the inital state into variable then reset it like this
class MyComponent extends Component {
static initialState = {
// your object state
}
constructor(props) {
super(props)
//set your state here when init component
this.state = {
}
}
resetForm() {
this.setState(initialState)
}
}
Let me know if you still have problem

Connecting custom values to button and passing them to function

I have a modal(using bootstrap 4 for react). And I want for two buttons to pass value to binded functions. How can I do this?
Here is my code
this is component
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
<ModalBody>
<WeatherInfo
nameOfCity={nameOfCity}
weatherDescription={weatherDescription}
windSpeed={windSpeed}
temperature={temperature}
maxTemperature={maxTemperature}
minTemperature={minTemperature}
isChec={isChec}
change={this.toggleCheckboxChange.bind(this)}
/>
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={function(){this.addToMyCityList.bind(this); this.toggle()}}>Add City</Button>{' '}
<Button color="primary" onClick={function(){this.removeFromMyCityList.bind(this); this.toggle()}}>Remove City</Button>{' '}
</ModalFooter>
</Modal>
and these are the functions that should get value
addToMyPCityList(e) {
this.props.dispatch(mPkArrayAdd(e.target.nameOfCity.value))
}
removeFromMyCityList(e) {
this.props.dispatch(mPkArrayRemove(e.target.nameOfCity.value))
}

This should work
<Button color="primary" onClick={function(e){this.addToMyCityList(e, myParam); this.toggle()}}>Add City</Button>
addToMyCityList(e, myParam) {}

How to get the value from FormControl with React-Bootstrap in Meteor

I'm using react-bootstrap in my current Meteor project. I can't seem to get this form to work. What am I doing wrong? I can't seem to be able to read the value of the FormControl input.
At the moment I am getting this error:
"imports/ui/components/add-spark.js:35:61: Unexpected token (35:61)"
Also my modal doesn't work anymore when I add 'ref="city"' to FormControl.
Then I get this error: "Uncaught Invariant Violation: Stateless function components cannot have refs"
UPDATE:
I have managed to get the ref in my modal working. But still I can't get the value from the form.
I ofcourse forgot to make it a class object which caused a lot of the problems. Now I am getting a different error though:
"Uncaught TypeError: Cannot read property 'cityInput' of undefined"
When I try to add my function like this:
<form onSubmit={ this.handleInsertSpark.bind(this) }>
My modal won't work anymore. I then get this error code:
"add-spark.js:53 Uncaught TypeError: Cannot read property 'bind' of undefined(…)"
This is my current code:
const handleInsertSpark = (event) => {
event.preventDefault();
var city = ReactDOM.findDOMNode(this.refs.cityInput).value
console.log(city);
};
function FieldGroup({ id, label, help, ...props }) {
return (
<FormGroup controlId={id}>
<ControlLabel>{label}</ControlLabel>
<FormControl {...props} />
{help && <HelpBlock>{help}</HelpBlock>}
</FormGroup>
);
}
export default class AddSpark extends Component {
render() {
return (<div>
<form onSubmit={ handleInsertSpark }>
<FormGroup controlId="formControlsCity">
<ControlLabel>Select your city</ControlLabel>
<FormControl componentClass="select" placeholder="Choose your city" ref="cityInput" onClick={ moreOptions }>
<option value="select">Choose your city</option>
<option value="0">Beijing</option>
<option value="1">Shanghai</option>
<option value="2">Chengdu & Chongqing</option>
</FormControl>
</FormGroup>
<FormGroup controlId="formControlsPerson">
<ControlLabel>Select your person</ControlLabel>
<FormControl componentClass="select" placeholder="Choose your person">
<option value="select">First select your city</option>
</FormControl>
</FormGroup>
<FormGroup controlId="formControlsLocation">
<ControlLabel>Select your location</ControlLabel>
<FormControl componentClass="select" placeholder="Choose your location">
<option value="select">First select your city</option>
</FormControl>
</FormGroup>
<FieldGroup
id="formControlsText"
type="text"
label="Title"
placeholder="Enter your title"
/>
<FormGroup controlId="formControlsTextarea">
<ControlLabel>Content</ControlLabel>
<FormControl componentClass="textarea" placeholder="textarea" />
</FormGroup>
<div className="upload-area">
<p className="alert alert-success text-center">
<span>Click or Drag an Image Here to Upload</span>
<input type="file" onChange={this.uploadFile} />
</p>
</div>
<Button
type="submit">
Submit
</Button>
</form>
</div>
)}
}

I managed to solve this myself by reading the React documentation again. Seems like I was just not using React in the way it is intended.
Here is my the code that works and does what I want it to do:
function FieldGroup({ id, label, help, ...props }) {
return (
<FormGroup controlId={id}>
<ControlLabel>{label}</ControlLabel>
<FormControl {...props} />
{help && <HelpBlock>{help}</HelpBlock>}
</FormGroup>
);
}
export default class AddSpark extends Component {
constructor(props){
super(props)
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('Text field value is: ' + this.state.value);
}
render() {
return (<div>
<form >
<FormGroup controlId="formControlsCity">
<ControlLabel>Select your city</ControlLabel>
<FormControl componentClass="select" placeholder="Choose your city" onClick={ moreOptions } value={this.state.value} onChange={this.handleChange} >
<option value="select">Choose your city</option>
<option value="Beijing">Beijing</option>
<option value="Shanghai">Shanghai</option>
<option value="Chengdu & Chongqing">Chengdu & Chongqing</option>
</FormControl>
</FormGroup>
<FormGroup controlId="formControlsPerson">
<ControlLabel>Select your person</ControlLabel>
<FormControl componentClass="select" placeholder="Choose your person">
<option value="select">First select your city</option>
</FormControl>
</FormGroup>
<FormGroup controlId="formControlsLocation">
<ControlLabel>Select your location</ControlLabel>
<FormControl componentClass="select" placeholder="Choose your location">
<option value="select">First select your city</option>
</FormControl>
</FormGroup>
<FieldGroup
id="formControlsText"
type="text"
label="Title"
placeholder="Enter your title"
/>
<FormGroup controlId="formControlsTextarea">
<ControlLabel>Content</ControlLabel>
<FormControl componentClass="textarea" placeholder="textarea" />
</FormGroup>
<div className="upload-area">
<p className="alert alert-success text-center">
<span>Click or Drag an Image Here to Upload</span>
<input type="file" onChange={this.uploadFile} />
</p>
</div>
<Button
onClick={this.handleSubmit}>
Submit
</Button>
</form>
</div>
)}
}