State is an internally managed configuration for any component. Let us take this example of creating a simple timer.
Inside a loop, it is common to want to pass an extra parameter to an event handler. For example, if id is the row ID, either of the following would work:
<button onClick={() => deleteRow(id)}>Delete Row</button>
// if you want the event also to be passed
<button onClick={(e) => deleteRow(id, e)}>Delete Row</button>
In both cases, the e aaxrgument representing the React event will be passed as a second argument after the ID. With an arrow function, we have to pass it explicitly, but with bind any further arguments are automatically forwarded.
There are times that you have many input tags and you want to write a single function to handle it
const initState = {
name: "",
address: "",
email: "",
password: ""
}
function App(){
const [state, setState] = React.useState(initState)
const handleChange = e => {
const {name, value} = e.target
setState( { ...state, [name]: value} )
}
return (
<div>
<div>
<input type="text" name="name" placeholder="name" value={state.name} onChange={handleChange} />
</div>
<div>
<input type="text" name="address" placeholder="address" value={state.address} onChange={handleChange} />
</div>
<div>
<input type="text" name="email" placeholder="email" value={state.email} onChange={handleChange} />
</div>
<div>
<input type="password" name="password" placeholder="password" value={state.password} onChange={handleChange} />
</div>
</div>
)
}
Example: https://codepen.io/albseb511/pen/yLavwxj?editors=1010
Conditional Rendering:Often you will want to render components based on a condition. This can easily be done in react by using a conditional if within the render function.
function App(){
if(condition){
return(
<Component if true />
)
}
else
return( <Component if false>)
}
Conditional rendering//Simple button that changes from login to logout when it is clicked!
function App(){
const [isLoggedIn, setIsLoggedIn] = React.useState(false)
handleClick = () =>{
setIsLoggedIn(prev=>!prev);
// or
setIsLoggedin(!isLoggedIn)
}
if(isLoggedIn){
return <button onClick = {handleClick} >Logout</button>
}
else{
return <button onClick = {shandleClick}>Login</button>
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
Inline If-Else with Logical && Operator
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
}
const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
The conditional operator is often used as a shorthand for the if statement.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
This can be really useful in react for in-line conditional rendering. Here is the login button example with the conditional operator.
Conditional rendering with conditional operator
//Simple button that changes from login to logout when it is clicked!
function App (){
const [isLoggedIn, setIsLoggedIn] = React.useState(false)
const handleClick = () =>{
setIsLoggedIn( !isLoggedIn )
}
return isLoggedIn ? (
<button onClick = {handleClick} >Logout</button>
) : (
<button onClick = {handleClick}>Login</button>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
Sometimes you may want to hide or delete components after rendering it.
To do this return null instead of any JSX in the render function.
function WarningBanner(props) {
if (!props.warn) {
return null;
}
return (
<div className="warning">
Warning!
</div>
);
}
class Page extends React.Component {
constructor(props) {
super(props);
this.state = {showWarning: true}
this.handleToggleClick = this.handleToggleClick.bind(this);
}
handleToggleClick() {
this.setState(prevState => ({
showWarning: !prevState.showWarning
}));
}
render() {
return (
<div>
<WarningBanner warn={this.state.showWarning} />
<button onClick={this.handleToggleClick}>
{this.state.showWarning ? 'Hide' : 'Show'}
</button>
</div>
);
}
}
ReactDOM.render(
<Page />,
document.getElementById('root')
);
Example:
Refs provide a way to access DOM nodes or React elements created in the render method.
In the typical React dataflow, props are the only way that parent components interact with their children. To modify a child, you re-render it with new props. However, there are a few cases where you need to imperatively modify a child outside of the typical dataflow. The child to be modified could be an instance of a React component, or it could be a DOM element. For both of these cases, React provides an escape hatch.
const ref = React.useRef()
// ref = { current: null }
const elem = React.useRef()
const onNewMessage = () => {
elem.current.scrollTop = // value
}
return (
<>
<div ref={elem} >
// lets assume the container is a scrollable container
// and lets say if a user receives a new message, you want to push the scroll bar to the bottom part
// refs also can be assigned with a callback method like `ref = { n => elem = n }`
// useful if you have an array of refs elem[i] = n
</div>
</>
)
When to Use Refs There are a few good use cases for refs:
const ref = React.useRef()
// ref = { current: null }
const startTimer = () => {
// if timer is not running then
const ref.current = setInterval(() =>{
setTimer(prev=>prev+1)
}, 1000 )
}
const stopTimer = () => {
clearInterval( ref.current )
}
React.useEffect(() =>{
startTimer()
return () => stopTimer()
// or
return stopTimer
}, [])
function Form(){
const file = React.useRef()
const handleSubmit = (e) => {
e.preventDefault();
console.log( `file is ${file.current.files[0]}` )
}
return (
<form onSubmit={handleSubmit}>
<input type="file" ref={file} />
<input type="submit" value="SUBMIT"/>
</form>
)
}
[File API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications)
[Example](https://codesandbox.io/s/forms-image-r1758)
FormsHTML form elements work a little bit differently from other DOM elements in React, because form elements naturally keep some internal state. For example, this form in plain HTML accepts a single name:
<form>
<label>
Name:
<input type="text" name="name" />
</label>
<input type="submit" value="Submit" />
</form>
This form has the default HTML form behavior of browsing to a new page when the user submits the form. If you want this behavior in React, it just works. But in most cases, it’s convenient to have a JavaScript function that handles the submission of the form and has access to the data that the user entered into the form. The standard way to achieve this is with a technique called “controlled components”.
In HTML, form elements such as input, textarea, and select typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState().
We can combine the two by making the React state be the “single source of truth”. Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a “controlled component”.
For example, if we want to make the previous example log the name when it is submitted, we can write the form as a controlled component:
function Form() {
const [value, setValue] = React.useState("");
const handleChange = (event) => {
setValue( event.target.value);
}
const handleSubmit = (event) => {
event.preventDefault();
alert('A name was submitted: ' + value);
}
render() {
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" value={value} onChange={handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
Since the value attribute is set on our form element, the displayed value will always be this.state.value, making the React state the source of truth. Since handleChange runs on every keystroke to update the React state, the displayed value will update as the user types.
With a controlled component, every state mutation will have an associated handler function. This makes it straightforward to modify or validate user input. For example, if we wanted to enforce that names are written with all uppercase letters, we could write handleChange as:
handleChange(event) {
setState(event.target.value.toUpperCase());
}
When you are working with input elements like checkbox it uses the attribute checked to decide if the element is checked
const handleChange = e => {
setState( e.target.checked )
}
return (
<input type="checkbox" checked={checked} onChange={handleChange} name="checkbox" />
)
In most cases, we recommend using controlled components to implement forms. In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.
To write an uncontrolled component, instead of writing an event handler for every state update, you can use a ref to get form values from the DOM.
This is more common when you work with a third party UI library where form data is managed by the library.
For example, this code accepts a single name in an uncontrolled component:
function Form() {
const input = React.useRef();
const handleSubmit(event) {
alert('A name was submitted: ' + this.input.current.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" ref={input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}