I want to take an entire form data and JSON.stringify it placing it into a textarea. The React.JS seems to be what I'm struggling with as I can do it with jquery ( but i don't want to use jquery with react)
constructor:
this.reactStringify = this.reactStringify.bind(this);
reactStringify function:
reactStringify() {
this.setState({xvalue: JSON.stringify(obj)}); // this puts data into textarea
// need to take form data and stringify
}
Not sure if I need to use some specific access to HTML FORM , or my componentDidMount()
I did see 1 website codepen talking about new FormData(this.form); but i cannot get it to work.
My form in the render
<form>
<button type="button" onClick={this.reactStringify} id="reactid">React stringify</button>
<input type="text" id="firstname" name="firstname"/>
<textarea value={this.state.xvalue} defaultValue="" rows="10" cols="80"></textarea><br />
</form>
My previous Question shows more data:
Set Textarea value to text or json of data properly in a function
JsFiddle.
Update:
Added a input text field for first name above.
Desired output is to take the form take and place into textarea, eventually to be able to also then download it to take data offline.
Output firstname : "Larry" etc...
While you do need to really spend time understanding React Forms, state and lifecycle and such. At the crux of what you are wanting is just basic form data etc..
Take a look at some basics if you added an id of myForm to your form tag
let myForm = document.getElementById('myForm');
let formData = new FormData(myForm);
console.log(myForm);
console.log(formData);
While above will not answer your question, it may help give you ideas on how FormData works.
For a solution to what you are wanting to do, it almost seems that until you can more comfortable with state and lifecycle of React etc.. , In your function reactStringify , I would just do this below as you are saying that you want form data to be captured and a json.stringify and setting it to the textarea value.
Add and ID to your form <form id="myForm">
let myForm = document.getElementById('myForm');
let formData = new FormData(myForm);
var object = {};
formData.forEach((value, key) => {object[key] = value});
var json = JSON.stringify(object);
this.setState({xvalue: json});
This should work fine for what you are wanting to do.
You can use new FormData, the FormData object will be populated with element that triggered the event. A working snippet for your code is given below:
class ClinicalMain extends React.Component {
constructor(props) {
super(props);
this.state = {xvalue: ""};
this.reactStringify = this.reactStringify.bind(this);
}
reactStringify(e) {
event.preventDefault();
const data = new FormData(e.target);
this.setState({xvalue: JSON.stringify(data.get('username'))});
}
render() {
return (
<React.Fragment>
<form onSubmit={this.reactStringify}>
<input id="username" name="username" type="text" />
<button>Send data!</button>
</form>
<textarea
value={this.state.xvalue}
rows="10" cols="80">
</textarea>
<br />
</React.Fragment>
);
}
}
ReactDOM.render(
<ClinicalMain name="World" />,
document.getElementById("container")
);
