score:1
Accepted answer
you need to have state inorder to make the input field (name) controlled.
import react from "react";
import reactdom from "react-dom";
import "./styles.css";
class app extends react.component {
constructor(props) {
super(props);
this.state = { name: "" };
}
handleclick = (event) => {
if (!this.state.name) {
alert("name should not be empty !");
}
};
changehandler = (event) => {
this.setstate({ name: event.target.value });
};
render() {
return (
<div classname="app">
name :
<input
id="name"
type="text"
placeholder="name"
name="aname"
value={this.state.name}
onchange={this.changehandler}
/>
<button classname="btn btn-danger" onclick={this.handleclick}>
submit
</button>
</div>
);
}
}
const rootelement = document.getelementbyid("root");
reactdom.render(<app />, rootelement);
score:1
it's quite simple. you need to use a state variable for this.
explanation:
- i have defined state variable
name
and used that in textbox- on change of input value i am assigning input text inside
name
variable- and then on handleclick, checking whether it's empty or not and based on that showing
alert box
working example: codesandbox
solution
constructor(props) {
super(props);
this.state = {
name: ''
};
}
handleclick = () => {
if (!this.state.name) {
alert('please enter');
}
};
render() {
return (
<div classname="app">
name{" "}
<input
type="text"
value={this.state.name}
onchange={(e) => this.setstate({ name: e.target.value })}
/>
<button classname="btn btn-danger" onclick={this.handleclick}>
submit
</button>
</div>
);
}
Source: stackoverflow.com
Related Query
- how to check if eles condition in alert in reactjs
- how can we check if condition in reactjs
- How to check if a pariticular fileExists in reactjs
- How to display Material-ui Alert based on the response of axios.post reactjs
- ReactJs : how to check Proptypes with function and shape?
- reactjs how to filter / check if a any object in an array is present in another array of objects?
- How check the state of individual checkbox in reactjs (material-table)
- How to Redirect to another page in ReactJS when a IF condition is executed?
- How to "Hide a div by clicking alert box ok button" in reactjs
- Reactjs - How do I check to see if a user clicks a textbox within a table row?
- Check if a condition is met before pushing a property into array ReactJS
- How to make a condition that would check for the presence of elements in the array?
- How to disable eslint check on development mode in reactjs
- how to add check box in table using reactjs
- How to add or condition using sequelize in Reactjs
- How to implement the condition in reactjs request?
- How to check a condition before the render of the component happen?
- How to show/hide divs when a if/else condition is met in ReactJS from a data coming from JSON?
- How to check all documents in a collection for a value firestore reactjs
- How to add Condition inside render method in reactjs
- How to remove an element from an array in ReactJS Redux state, when a condition is true?
- How to replace a word in a sentence based on a condition in ReactJS
- How to check condition inside map without putting a div
- How can I check condition in reactjsx?
- How to use OR Condition in Ternary operator in ReactJS
- How to make some radio buttons disable under condition inside array in reactJs
- ReactJS – how to check whether value is undefined
- How to check multiple states in reactjs on an if statement?
- How to check which condition was true in an if statement where the order matters?
- How to alert a Selected Record using Reactjs
More Query from same tag
- How to set object state in react
- How to build React checkbox tree
- React/Recoil: once state is set in the main app, cannot be set again inside a component?
- Clear Select component after an option is selected in Ant Design and React
- React: props populated with componentWillMount and Redux
- React: Define ref prop on immediate descendant?
- How make my login function working with React functional components using React-Router (TypeScript)?
- show loading bar when parent component pass data to and render child component. React.JS
- Getting values from form input groups
- Why do I get a question mark in my localhost link? https://localhost:3000/?
- Bootstrap-multiselect: default value and onChange not working
- Running function twice and saving the output for comparison
- Rechart - adding labels to charts
- Paste test in cypress in reactjs project
- Firebase issue with react-snap
- required css react app background-image
- Typescript complains about a property not being there but it is there
- How to "flatten" a nested object array in React?
- React Hook setData not updating properly
- failes to open modal component from another component
- using a value through react components
- Force clients to reload my bundle.js
- React cleanup function doesn't clean state
- Difference between two ways of adding properties to object in Javascript
- how to fetch the data while pagination in ReactJS?
- What does it mean to write two arrays together?
- How to manipulate attributes from ref selector
- How do i scroll page vertically by dragging from inside a horizontally scrollable component
- React only saves input value state on typing but not when filled by API data
- Sort Array with two object inside