React Note 1
React Note 1
<h1>{this.state.data}</h1>
<button onClick={() => this.Apple()}>Update Data</button>
</div>
);
}
function App() {
const [data,setData]=useState("Lucky") // ‘data is an State’,
‘setDate’ name for a const.
function updateData()
{
setData("bandhey") // change for State Data.
}
console.warn("______");
return (
<div className="App">
<h1>{data}</h1>
<button onClick={updateData}>Update Data</button>
</div>
);
}
Props(properties)
App.js /* javascript file name App */
// ############# props with functional component ############ //
// What were the props & why So Used us?
// Answer:- Basically props are passed through the data into components.
It’s used for data changing & parameters as props.
function App() {
return (
<div className="App">
<h1>go go</h1>
<User Name={"lucky"} Email={"[email protected]"}/>
<User Name={"bandhey"} Email={"[email protected]"}/>
</div>
);
}
function Apple(name) {
console.log(name.Name); /* (name.Name)==(Prop Name.context Name)
*/
return (
<div style={{ backgroundColor: "skyblue", color:
"blue",margin:10}}>
<h1>hello guy's {name.Name}</h1>
<h2>hello guy's {name.Email}</h2>
</div>
);
}
export default Apple;
Get Input Box Value
import './App.css';
import React,{useState} from 'react';
function App(){
const [data,setData]= useState(null);
function getDate(val){
setData(val.target.value);
}
return(
<div className="App">
<h1>Get Input Box value</h1>
<p>{data}</p>
<input type="text" onChange={getDate}/>
</div>
);
}
export default App;
setData(val.target.value);
setPrint(false);
}
return(
<div className="App">
<h1>Get Input Box value</h1>
<div>
{
print?
<h1>{data}</h1> // If Else Condition On a function
:null
}
</div>
<input type="text" onChange={getDate}/>
<button onClick={()=>setPrint(true)}>Get Print</button>
</div>
);
}
export default App;
<button onClick={()=>setStatus(false)}>hide</button>
<button onClick={()=>setStatus(true)}>show</button>
<button onClick={()=>setStatus(!
status)}>toggle</button>
</div>
);
}
export default App;
Form Handling
import React from "react";
import './App.css';
function App() {
</form>
</div>
);
}
export default App;
Conditional method
App.js
import './App.css';
import User from './User';
function App(){
return(
<div className="App">
<User/>
</div>
);
}
export default App;
return (
<div>
// that’s condition is ternary operation
{conditional ? <h2>hello bhai!</h2> : <h2>hii bhai!
</h2>}
</div>
);
}
export default Profile;
App.js
import './App.css';
import Login from './Login';
import React from 'react';
function App(){
return(
<div className="App">
<Login />
</div>
);
}
export default App;
return (
<div>
<h1>Login Form</h1>
<form onSubmit={Submit}>
<input type="text" placeholder="Enter Name"
onChange={Name} />
{error ? <p>invaild</p> : ""}<br /><br />
<input type="text" placeholder="Enter Password"
onChange={Password} />
{errorPass ? <p>invaild</p> : ""}<br /><br />
<button>Submit</button>
</form>
</div>
);
}
export default LoggedIn;