We Keep Coding

React Formik get form state's values

I have a form with two fields name and age. I know when user fill these two fields and hit the submit button I can get the values for these two fields.
But what I want is, I have a button call show filled values. When your press that button I want to see the user-filled values in the form. For example, if he fills name as 'Tom' and age as 85. I want to see that. But right now what I am getting is the empty initial values object.
My Code
How do I achieve this using Reactjs?

U can get the filled fields using Formiks props provided by the Formik.
The values prop provided by the formik will gives the filled fields values. Initially it will be the empty object . After you start filling the fields, the values object will be updated accordingly.
To know more What Props can Formik provide ?
visit :- https://formik.org/docs/api/formik#touched--field-string-boolean-
Hope the below code snippet will be useful for you.
<Formik
initialValues={{}}
validationSchema={() => Yup.object().shape({`enter your validation keys here`})}
onSubmit={(values) => {
console.log('values after submit', values);
}}
>
{(formikProps) => {
const { values, handleChange } = formikProps;
return (
<Form>
<label>
name
<input name="name" onChange={handleChange} />
</label>
<label>
age
<input name="age" type="number" onChange={handleChange} />
</label>
<button
type="button"
onClick={() => {
console.log('show filled fields', values);
}}
>
Show Filled Fields
</button>
<button type={'submit'}> Submit</button>
</Form>
);
}}
</Formik>

Reactjs - why my input field have no response when put in a function component?

Consider these 2 lines:
<input name='workMinute1' value={workMinute} onChange={changeHandler} />
<Label name='workMinute' value={workMinute} />
They are basically doing the same thing, but second line comes from:
function Label(p) {
return (
<input name={p.name} value={p.value} onChange={changeHandler} />
)
};
Result: the input box in the second line will not response when trying to type in.
I can find related answers but I cannot find a succinct answer that describe the inner working of React related to this issue.

Suppose your changeHandler looks this way:-
function changeHandler(e){
setValue(e.target.value);
}
Your Label component declaration should be this way:-
<Label name='workMinute' value={workMinute} changeHandler={changeHandler}/>
So your updated component will be:-
function Label(p) {
return (
<input name={p.name} value={p.value} onChange={p.changeHandler} />
)
};

React Application. Submit button is only returning "type" and not the actual value submitted to it

I want this application to be able to add a new animal object but when i console.log to see the output of my handle submit function it returns the string "type". Ive narrowed down the bug to be in my map method that returns the animal type: value='type'>{type}
but im unsure what to replace here to get the desired output of whats submitted
handleSubmit(e) {
console.log(this.refs.type.value)
e.preventDefault()
}
render() {
let typeOptions = this.props.types.map(type => {
return (<option key={type} value='type'>{type}</option>)
})
return (
<div>
<h3>Add an Animal</h3>
<form onSubmit={this.handleSubmit.bind(this)}>
<div>
<label>Species</label><br />
<input type='text' ref='species' />
</div>
<div>
<label>Type</label><br />
<select ref="type" >
{typeOptions}
</select>
</div>
<input type='submit' value='submit' />
</form>
</div>

return (<option key={type} value='type'>{type}</option>)
^^ 1 ^^ 2 ^^ 3
What is this key attribute? It does not exist in HTML. Get rid of it
Look here. You have set the value to be the hard-coded string 'type'. Don't do that. Use a variable.
Here you've used a variable. Do the same thing for the value attribute.

Submitting big forms with react.js

It's a pain to work with react.js when it comes to form. I was from angular, because of 2 ways binding things are great, it's fast to integrate stuff. But when in react I admit I'm lost.
Says it's a user profile, I got this data from API
var profile = {
name:"Gaila",
age:22,
skills: [{id:1,name:"react"},{id:1,name:"angular"}],
club: [{id:1,name:"dancing"},{id:1,name:"hiking"}],
description: "some long string"
};
on the UI I have text input, textarea, checkbox and select.
How would I handle it when user clicked to save? Do I have to bind every single input elements with onChange? like handleNameChange, handleAgeChange, handleSkillsChange.. omg it's ridiculous.
So ref came into my mind, easy, just do ref="name" and I can get it by ReactDOM.findDOMNode(this.refs.name).value, but wait, it doesn't work on <select>, it's bad sometime I use ref, sometime I go with handle function.
Guys, I seriously, really need help!

Here is an example of reusing an event handler and picking up the differences from the event. See it in action at codepen.
const FormFunc = () => {
const changeHandler = (e) => {
console.log(`e.target.name, name: `, e.target.name, e.target.value)
}
return (
<form>
<input onChange={changeHandler} type='text' name='firstName' />
<input onChange={changeHandler} type='text' name='surname' />
<input onChange={changeHandler} type='phone' name='phone' />
<input onChange={changeHandler} type='email' name='email' />
</form>
)
}

If you only need to extract form values, you can use form-serialize - it's available as a package through npm.
In your component, add a submit event to your form:
<form onSubmit={this.handleSubmit}>
Your handler extracts the form like so:
handleSubmit = (event) => {
event.preventDefault()
const values = serializeForm(event.target, { hash: true })
console.log(values)
}

How to get Material-UI's <TextField/> to return correctly with ref='' like <input/> in ReactJS?

With the following method:
handleClick(event) {
const inputText = this.refs.inputText
console.log(inputText.value.trim())
}
I am trying to get Material-UI's <TextField/> to return the input text correctly with ref like the <input/> can with <button/> triggering it:
<input
className='form-control'
placeholder='Input Text'
ref='inputText'
type='text'
/>
<button
onClick={(event) => this.handleClick(event)}
>
And I attempted the following with <TextField/>, but it returns as undefined. How can I get it to return inputted text correctly like the <input/> above?
<TextField
hint='Enter text'
className='form-control'
ref='inputText'
type='text'
/>

I would suggest this approach:
Set up your textfield with a value and onChange function that are hooked into redux itself, where the onChange function just updates the value.
So you'd have something like this :
<TextField
value={this.props.textFieldValue}
onChange={this.props.textFieldChange}
Where the textFieldChange is an action that simply updates the textFieldValue. Most forms in redux will work something like this. Keep in mind the names i made up for those props and action are just for example. If you have a big form you might want to consider have part of the state tree dedicated to the form itself where you have :
state: {
form: {
textField: ...your textfield value here,
name: ...,
whateverElse: ...
}
};
I like doing this with redux because I can make that architect form part of the state to look like the json payload of wherever I'm sending it to, so there I can just send the form went I want to send it.
Anyways, back to this example. When you click your handleClick now. All you need to do is this to get the value:
handleClick(event) {
console.log(this.props.textFieldValue.trim());
}
Because the textfield is updated with every change, you always have access to it in your state. This also gives you flexibility over the refs approach, because if you use refs you will have a lot harder of a time getting access to that form in other components. With this approach, all the information is on your state so you can access it anytime, as long as you manage your props.

You should use the onChange={} to get the value:
_onChange = (e) => {
console.log(e.target.value);
}
<TextField
onChange={this._onChange}
/>

Here's a better solution than using onchange event, we get directly the value of the input created by material-ui textField :
create(e) {
e.preventDefault();
let name = this.refs.inputText.input.value;
alert(name);
}
constructor(){
super();
this.create = this.create.bind(this);
}
render() {
return (
<form>
<TextField ref="inputText" hintText="" floatingLabelText="Your name" /><br/>
<RaisedButton label="Create" onClick={this.create} primary={true} />
</form>
)}
hope this helps.