whenever you are creating a react application, you have to create components.
then these small components have to manage data, so to manage data inside a component we use a state like a variable.
lets go with a example:
1.create a react app:
npx create-react-app hello
2. create component named: MyElement
const MyElement=()=>{
return (
<div>
hello insan
</div>
)
}
export default MyElement;
3.use the component in app.js:
import MyElement from './MyElement';
function App() {
return (
<MyElement />
);
}
export default App;
1. now if we have to create a state, we need a hook named: "useState('default_value')".
2. it is used to create dynamic variables(state).
3. useState() returns an array of two things:
a. first one is: variable
b. second one is: modifier function that is used to re-render the value on change
syntax:
const [base_var_name, function_name]=useState("deafult_value");
4. useState() can be used if you import it from react library.
example:
import {useState} from "react";
lets create a state:
import {useState} from "react";
const MyElement=()=>{
const [name,setName]=useState("manushya");
return (
<div>
hello, {name}
</div>
)
}
export default MyElement;
props
props are something that a component receives.
lets take a example:
1.open app.js file
there we will type a random props named "lastname" that takes the value of varaible n variable created in app.js file.
import MyElement from './MyElement';
function App() {
const n="insan";
return (
<MyElement lastname={n}/>
);
}
export default App;
2.then create a props named "propsdata" that receives the incoming data.
import {useState} from "react";
const MyElement=(propsdata)=>{
const [name,setName]=useState("deepak");
return (
<div>
hello, {name} {propsdata.lastname}
</div>
)
}
export default MyElement;
or
there is another way to use like as follows:
import {useState} from "react";
const MyElement=({lastname})=>{
const [name,setName]=useState("deepak");
return (
<div>
hello, {name} {lastname}
</div>
)
}
export default MyElement;
lets create a slider using states as an basic assignment of slider:
1.create a Slider.js file for slider
import {useState} from "react";
const url=["https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?size=626&ext=jpg&ga=GA1.1.1412446893.1704412800&semt=sph",
"https://img.freepik.com/premium-photo/pink-sunset-with-palm-trees-horizon_654523-31.jpg",
"https://images.unsplash.com/photo-1502899576159-f224dc2349fa?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8ZnVsbCUyMGhkJTIwd2FsbHBhcGVyfGVufDB8fDB8fHww"
]
const Slider=()=>{
const [activeimgindex,setactiveimgindex]=useState(0);
const nexthandle=()=>{
if(activeimgindex>=url.length-1)
{
setactiveimgindex(0);
}
else
{
setactiveimgindex(activeimgindex+1);
}
}
const prevhandle=()=>{
if(activeimgindex==0)
{
setactiveimgindex(url.length-1);
}
else
{
setactiveimgindex(activeimgindex-1);
}
}
return (
<div className="box">
<div><button onClick={prevhandle}>prev</button></div>
<img src={url[activeimgindex]} />
<div><button onClick={nexthandle}>next</button></div>
</div>
);
}
export default Slider;
2. then import and use it in app.js:
import MyElement from './MyElement';
import Slider from "./Slider";
import "./App.css";
function App() {
const n="insan";
return (
<div>
<MyElement lastname={n}/>
<Slider />
</div>
);
}
export default App;
0 Comments