score:0
simple you have to update the value
and name
in radio button.
check below code.
<label>
<input
type="radio"
name="gender"
value="male"
checked={this.state.gender == "male"}
onchange={this.handlechange}
/> male<br />
</label>
<label>
<input
type="radio"
name="gender"
checked={this.state.gender == "female"}
value="female"
onchange={this.handlechange}
/> female <br /> <br />
</label>
hope this will work for you!
score:1
you had some spelling mistakes, inconsistency with variables names and wrong logic at handlechange
:
import react from 'react';
export default class app extends react.component {
state = {
firstname: '',
lastname: '',
age: '',
gender: '',
issubmitted: false
};
handlechange = event => {
const { name, value } = event.target;
console.log(event.target);
this.setstate({ [name]: value });
};
handlesubmit = event => {
this.setstate({ issubmitted: true });
event.preventdefault();
};
render() {
return (
<main>
<form onsubmit={this.handlesubmit}>
<input
type="text"
name="firstname"
value={this.state.firstname}
placeholder="first name"
onchange={this.handlechange}
/>
<br />
<input
name="lastname"
value={this.state.lastname}
placeholder="last name"
onchange={this.handlechange}
/>
<br />
<input
type="number"
name="age"
value={this.state.age}
placeholder="age"
onchange={this.handlechange}
/>
<br />
<label>
<input
type="radio"
name="gender"
value="male"
checked={this.state.gender === 'male'}
onchange={this.handlechange}
/>{' '}
male
<br />
</label>
<label>
<input
type="radio"
name="gender"
checked={this.state.gender === 'female'}
value="female"
onchange={this.handlechange}
/>{' '}
female <br /> <br />
</label>
<button>submit</button>
</form>
<hr />
<h2>entered information:</h2>
{this.state.issubmitted === true ? (
<div>
{' '}
<p>
{' '}
your name: {this.state.firstname}
{this.state.lastname}
</p>
<p> your age: {this.state.age} </p>
<p> your gender: {this.state.gender} </p>{' '}
</div>
) : (
<div> </div>
)}
</main>
);
}
}
Source: stackoverflow.com
Related Query
- How to make the radio buttons work and output values in reactjs
- how to handle multiple radio buttons and their values - ReactJs
- How can I make this Formik form work with custom Buttons I can't get the values to get to handleSubmit
- How to make Puppeteer work with a ReactJS application on the client-side
- In Reactjs, how to make a prop function do separate tasks and return their values according to the required condition
- How to get label values dynamically and adding the numbers together from different input with reactjs
- How to make the filters work in this todo app created using react and redux?
- How can I the buttons to work in every component that is returned from an array? ReactJS
- How to update state in ReactJS and use the values at the same time
- Button download always target and download the first svg in my collection , how to make it work so that is target each specific svg
- How to loop array and output the values inside an array of objects as 'value' and 'label'?
- How to make some radio buttons disable under condition inside array in reactJs
- How to make Radio buttons of the same Radio group align in several columns in Material UI?
- How to create contact form with ReactJS and send the values with API - Express
- how to get the values of a checked checkbox and the output it on a input field
- How can i get the values of multi dynamic check boxes and store into a reactjs state
- how to make sure to get the latest values of input when using useState hook in ReactJs
- I have buttons and a textbook in my React App, How do I make the click of the button trigger text input?
- How does form checkboxes and radio buttons work with React.js?
- How to get the value of a group of Radio Buttons in ReactJS
- How do we persist redux store without using localstorage and make full reactjs web application work offline
- How to submit a form with radio buttons in react and increment the state by one based on the value submitted?
- ReactJS get values of dynamically created Radio Buttons and pass them into state (usestate)
- How to make a reusable dropdown filter in ReactJS which is DRY and can be used twice in the same component
- how do make the text far from the cirlce i tried padding and margin and it didn't work
- How to retain and pass the new state values to another router component in ReactJS
- How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?
- How to get Django and ReactJS to work together?
- How to make default checked for radio buttons in react?
- How to make react router work with static assets, html5 mode, history API and nested routes?
More Query from same tag
- React error: "could not find the 'store' in the context of ..."
- React cannot import CSS file, and throws an error
- Break out of ReactRouter when there is no match
- JWT Token (Invalid token Specified)
- How to prevent shared state in a parent component from breaking CSS transitions in children component
- unable to create an MxGraph from the XML provided
- Correct way to get refs and attach event listeners in React ComponentDidMount?
- Using onBlur with JSX and React
- Adding color to html element based on string
- How to write mobx reaction to successful data fetch?
- useEffect has missing dependency
- Timer did not reach zero javascript react
- Structuring Redux state by domain?
- How to Close and Unmount Bootstrap Modal with React.js Portals
- using axios in componentWillMount method got me an weired error
- Getting react-dropzone to accept *all* files
- Typescript 3.7.2, React and Material UI 4.5.1 Snackbars - trying to do an error popup but get styles errors
- Why JavaScrips works only after loading page?
- How to change the font color of React Victory Tooltip
- How to watch changes in react.js?
- Cookie from response doesn't get set in time for navigation within React component
- How to add custom icon in react select of search filter
- Line Chart not updating everytime
- Unable to get dropdown value in reactjs
- Lifting State Up And Functional Components
- retun values in function of array.map in react
- ReactJS - How to change route in different component?
- How to push data feed to Dashboard to be able create charts on it in react-admin?
- How to get an element height in react js with out using any pulgin
- Format date to "YYYY-MM-DD" before post data to an API , Redux-Saga