Updated April 7, 2023
Introduction to React native usestate
For having state variables in the functional components, usestate is used. We can pass the initial state in the function, and the function can return a variable along with the value of the current state and another function for updating the value. Usestate is used in React Native to change the state of a component to a different state. This concept is very useful while making applications where the applications allow the user to change a function’s state. This article explains the concept of usestate with different examples, which can help the readers in understanding the concept.
Syntax:
import React
, { useState } from 'react'
……
function New() {
const [count
, setCount] = useState(0)
……………
}Using useState in React Native with Examples
Here are the following examples mention below
Example #1
Below, useState allows us to have state variables in functional components. We have passed the initial state to the function, and a variable with the current state value is returned on pressing the “Bulb On” button, and another function is returned to update the value.
The files used for the proper execution of the code are –
[i] index.js
import React
, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const rootElement = document.getElementById("root");
function LightbulbSvg(props) {
return (
<svg width="100px"
height="150px"
viewBox="0 0 56 90"
version="1.1">
<defs />
<g
id="Page-1"
stroke="none"
stroke-width="1"
fill="none"
fill-rule="evenodd"
>
<g id="noun_bulb_1912567"
fill="#5c0404"
fill-rule="nonzero">
<path
d="M41.521
,78.592 C41.521
,77.192 40.386
,76.057 38.986
,76.057 L17.015
,76.057 C15.615
,76.057 14.48
,77.192 14.48
,78.592 C14.48
,79.993 15.615
,81.128 17.015
,81.128 L38.986
,81.128 C40.386
,81.127 41.521
,79.993 41.521
,78.592 Z"
id="Shape"
/>
<path
d="M38.985
,68.873 L17.015
,68.873 C15.615
,68.873 14.48
,70.009 14.48
,71.409 C14.48
,72.809 15.615
,73.944 17.015
,73.944 L38.986
,73.944 C40.386
,73.944 41.521
,72.809 41.521
,71.409 C41.521
,70.009 40.386
,68.873 38.985
,68.873 Z"
id="Shape"
/>
<path
d="M16.857
,66.322 L39.142
,66.322 C40.541
,66.322 41.784
,65.19 42.04
,63.814 C44.63
,49.959 55.886
,41.575 55.886
,27.887 C55.887
,12.485 43.401
,0 28
,0 C12.599
,0 0.113
,12.485 0.113
,27.887 C0.113
,41.575 11.369
,49.958 13.959
,63.814 C14.216
,65.19 15.458
,66.322 16.857
,66.322 Z"
id="Shape"
fill={props.fillColor}
/>
<path
d="M18.282
,83.24 C17.114
,83.24 16.793
,83.952 17.559
,84.83 L21.806
,89.682 C21.961
,89.858 22.273
,90 22.508
,90 L33.492
,90 C33.726
,90 34.039
,89.858 34.193
,89.682 L38.44
,84.83 C39.207
,83.952 38.885
,83.24 37.717
,83.24 L18.282
,83.24 Z"
id="Shape"
/>
</g>
</g>
</svg>
);
}
function Bulb() {
const setOn = () => setLight(1);
let [light
, setLight] = useState(0);
let fillColor = light === 1 ? "#f0db51" : "#055d63";
const setOff = () => setLight(0);
return (
<div style={{
backgroundImage: `url("https://images.pexels.com/photos/2445890/pexels-photo-2445890.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500")`
, height:'480px'
, width: '500px'
}}
className="App">
<div >
<LightbulbSvg
fillColor={fillColor} />
</div>
<button
onClick={setOn}
style={{
color: '#e30b1d'
, height: '50px'
, width: '150px'
, backgroundColor: '#f5ee67'
, borderRadius: '50px'
, borderRightWidth: '5px'
, borderRightColor: '#31cc43'
, borderLeftWidth: '5px'
, borderLeftColor: '#0c0c70'
, borderBottomWidth: '10px'
, borderTopColor: '#ad1599'
, borderBottomColor: '#3e700c'
, fontSize: '15px'
}}
>
Bulb ON</button>
<button
onClick={setOff}
style={{
color: '#991450'
, height: '50px'
, width: '150px'
, backgroundColor: '#8ef73e'
, borderRadius: '50px'
, borderRightWidth: '5px'
, borderRightColor: '#b30b1b'
, borderLeftWidth: '5px'
, borderLeftColor: '#0b0ebd'
, borderTopWidth: '10px'
, borderTopColor: '#e3431b'
, borderBottomColor: '#22c0f5'
, fontSize: '15px'
}}
>
Bulb OFF
</button>
</div>
);
}
ReactDOM.render(<Bulb />, rootElement);[ii] styles.css
.App {
font-family: 'Times New Roman'
, Times
, serif;
text-align: center;
}Output:
- On code execution –
- On clicking the “Bulb ON” button –
Example #2
The below example states the usage of useState to update the value of the counter when the “Let’s Count” button is clicked.
The files used for proper execution of the code are –
[i] New.js
import React
, { useState } from 'react'
export default New
function New() {
const [count
, setCount] = useState(0)
return (
<div style={{
backgroundImage: `url("https://images.pexels.com/photos/4523890/pexels-photo-4523890.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500")`
, height:'480px'
, width: '500px'
, color: '#c70c3e'
, alignItems: 'center'
, textAlign: 'center'
}}>
<button
onClick={() => setCount(count + 1)}
style={{
color: '#530ead'
, height: '50px'
, width: '150px'
, backgroundColor: '#fa9248'
, borderRadius: '50px'
, borderRightWidth: '5px'
, borderRightColor: '#31cc43'
, borderLeftWidth: '5px'
, borderLeftColor: '#24c4c9'
, borderBottomWidth: '10px'
, borderTopColor: '#0609c7'
, borderBottomColor: '#d916d9'
, fontSize: '15px'
}}
>Let's Count</button>
<p style={{
backgroundColor: '#55d0f2'
}}>Clicking done {count} times</p>
</div>
)
}[ii] index.js
import React from 'react'
import ReactDOM from 'react-dom'
import New from './New'
function Application() {
return (
<div className="App">
<New />
</div>
)
}
const rootElement = document.getElementById('root')
ReactDOM.render(
<Application />
, rootElement)[iii] styles.css
.App {
font-family: 'Times New Roman'
, Times
, serif;
text-align: center;
}Output:
- On code execution –
- On clicking the “Let’s Count” button –
Example #3
The below example states the usage of useState in a React Native based form application.
Files used for the proper execution of the code are:
[i] index.js
import React
, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function SimpleForm(props) {
const [Course
, setCourse] = useState(props.Course);
const [Name
, setName] = useState(props.Name);
const [ContactNo
, setContactNo] = useState(props.ContactNo);
return (
<form style={{
backgroundImage: `url("https://images.pexels.com/photos/2896668/pexels-photo-2896668.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500")`
, height:'480px'
, width: '500px'
, color: '#c70c3e'
, alignItems: 'center'
, textAlign: 'center'
}}>
<p style={{
image: `url("https://cdn.educba.com/academy/wp-content/uploads/2020/05/cropped-website_logo_transparent_background_white.png")`
, height:'80px'
, width: '50px'
, alignItems: 'center'
, textAlign: 'center'
}}></p>
<label style={{
backgroundColor: '#55d0f2'
, color: '#530ead'
, height: '50px'
, width: '150px'
, borderRadius: '50px'
, borderRightWidth: '5px'
, borderRightColor: '#31cc43'
, borderLeftWidth: '5px'
, borderLeftColor: '#24c4c9'
, borderBottomWidth: '10px'
, borderTopColor: '#0609c7'
, borderBottomColor: '#d916d9'
, fontSize: '15px'
, alignItems: 'center'
, textAlign: 'center'
}}>
Your Name:
<input
type="text"
value={Name}
onChange={event => setName(event.target.value)}
style={{
backgroundColor: '#ffbb73'
, color: '#530ead'
, height: '15px'
, width: '150px'
, borderRadius: '50px'
, fontSize: '15px'
, alignItems: 'center'
, textAlign: 'center'
}}
/>
</label>
<br/>
<label style={{
backgroundColor: '#f5f55d'
, color: '#530ead'
, height: '50px'
, width: '150px'
, borderRadius: '50px'
, borderRightWidth: '5px'
, borderRightColor: '#31cc43'
, borderLeftWidth: '5px'
, borderLeftColor: '#24c4c9'
, borderBottomWidth: '10px'
, borderTopColor: '#0609c7'
, borderBottomColor: '#d916d9'
, fontSize: '15px'
}}>
Course Choice:
<input
type="text"
style={{
backgroundColor: '#e32255'
, color: '#530ead'
, height: '15px'
, width: '130px'
, borderRadius: '50px'
, fontSize: '15px'
, alignItems: 'center'
, textAlign: 'center'
}}
value={Course}
onChange={event => setCourse(event.target.value)}
/>
</label>
<br/>
<label style={{
backgroundColor: '#9df241'
, color: '#530ead'
, height: '50px'
, width: '130px'
, borderRadius: '50px'
, borderRightWidth: '5px'
, borderRightColor: '#31cc43'
, borderLeftWidth: '5px'
, borderLeftColor: '#24c4c9'
, borderBottomWidth: '10px'
, borderTopColor: '#0609c7'
, borderBottomColor: '#d916d9'
, fontSize: '15px'
}}>
Contact No.:
<input
type="number"
style={{
backgroundColor: '#46f26c'
, color: '#530ead'
, height: '15px'
, width: '150px'
, borderRadius: '50px'
, fontSize: '15px'
, alignItems: 'center'
, textAlign: 'center'
}}
value={ContactNo}
onChange={event => ContactNo(event.target.value)}
/>
</label>
<br/>
<p></p>
<input
type="submit"
style={{
backgroundColor: '#c367f5'
, color: '#530ead'
, height: '50px'
, width: '150px'
, borderRadius: '50px'
, borderRightWidth: '5px'
, borderRightColor: '#31cc43'
, borderLeftWidth: '5px'
, borderLeftColor: '#24c4c9'
, borderBottomWidth: '10px'
, borderTopColor: '#0609c7'
, borderBottomColor: '#d916d9'
, fontSize: '15px'
}}
value="Proceed" />
<p></p>
<a href="https://www.educba.com/"
style={{
backgroundColor: '#e3cc4d'
, color: '#040ac7'}}>Click to Visit Us</a>
</form>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<>
<SimpleForm
Name="Rahul Dubey"
Course="React Native"
ContactNo={9876543210} />
<br/>
</>,
rootElement
);[ii] styles.css
.App {
font-family: sans-serif;
text-align: center;
}Output:
Conclusion
On the basis of the above article, we can understand the concept of usestate in React Native. The article explains how usestate can be used for changing the states of different components. The examples explained above will help the readers in understanding the implementation of usestate according to different apps.
Recommended Articles
This is a guide to React native usestate. Here we discuss how usestate can be used for changing the states of different components with examples. You may also have a look at the following articles to learn more –
