React array map method
import React from 'react';
const Gallery = () => {
const data=[
{
id:1,
img:"https://picsum.photos/210/300",
},
{
id:2,
img:"https://picsum.photos/210/300",
},
];
const arraydata = data.map((val, i)=>{
return(
<img src={data[i].img}/>
);
});
return (
<>
<h1>Gallery</h1>
<div className="gallery">
{arraydata}
</div>
</>
)
}
export default Gallery;
Link To Different Pages
<!-- This is on Index.js page -->
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import {BrowserRouter} from 'react-router-dom';
ReactDOM.render(
<>
<BrowserRouter><App/></BrowserRouter></>,
document.getElementById('root'));
<!-- This is on App.js page -->
import Home from './Pages/Home';
import About from './Pages/About';
import Contact from './Pages/Contact';
function App(){
return(
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/About" component={About} />
<Route exact path="/Contact" component={Contact} />
<Redirect to="/"/>
</Switch>
);
}
export default App;
<!-- This is on Navigation.jsx page -->
import React from 'react';
import {NavLink} from 'react-router-dom';
function Nav(){
return(
<>
<nav>
<div className="navbar">
<NavLink to="/">Portfolio</NavLink>
<ul>
<li><NavLink to="/">Home</NavLink></li>
<li><NavLink to="/About">About</NavLink></li>
<li><NavLink to="/Contact">Contact</NavLink></li>
</ul>
</div>
</nav>
</>
);
}
export default Nav;
Use State and Ternary Operator
import React, { useState } from 'react'
import Back from '../Component/Back'
const IncDecNumber = () => {
const [num, setNum]=useState(0); //Use State
const incNum=()=>{
setNum(num+1);
}
const decNum=()=>{
// If Else statement
// if(num > 0)
// setNum(num-1);
// else{
// setNum(0);
// alert("Sorry, Zero limit reached")
// }
num > 0 ? setNum(num-1) : setNum(0); //Ternary Operater
}
return (
<>
<Back/>
<div className="center_div">
<div className="IncDecNum">
<h1>{num}</h1>
<div>
<button className="btn1" onClick={incNum}>Increment</button>
<button className="btn2" onClick={decNum}>Decrement</button>
</div>
</div>
</div>
</>
)
}
export default IncDecNumber;
Props in react
<!-- Props file -->
import React from 'react';
import Back from '../Component/Back';
const Props = (props) => {
return (
<>
<Back />
<div className='props'>
<h1>Hi I am {props.name}</h1>
</div>
</>
);
};
export default Props;
<!-- where I can defined the props -->
import React from 'react';
import Props from './Props';
const Help = () => {
return (
<div>
<Props name='Arshad' /> <!-- props -->
<Props name='Arshad' /> <!-- props -->
</div>
);
};
export default Help;
Params in react
<!-- params -->
import React from 'react';
import { useParams } from 'react-router-dom';
import Back from '../Component/Back';
const Params = () => {
const { fname, lname } = useParams();
return (
<>
<Back />
<h1>
Hello I Am {fname}
{lname}
</h1>
</>
);
};
export default Params;
<!-- params app.js -->
import React from 'react';
import Params from './Practices/Params';
function App() {
return (
<>
<Switch>
<Route exact path='/params/:fname/:lname' component={Params} /> <!-- params (/:fname/:lname) -->
</Switch>
</>
);
}
export default App;
<!-- params menu -->
import React from 'react';
import { NavLink } from 'react-router-dom';
const PracticeHeading = () => {
return (
<>
<div className='heading_link'>
<NavLink to='/params/Arshad/Qadri'>Params</NavLink> <!-- params -->
</div>
</>
);
};
export default PracticeHeading;
useLocation in react
import React from 'react';
import Back from '../Component/Back';
import { useLocation } from 'react-router-dom';
const Location = () => {
const location = useLocation();
return (
<>
<Back />
<p>This is my url path or location {location.pathname} </p>
</>
);
};
export default Location;
useHistory in react
import React from 'react';
import { useHistory } from 'react-router-dom';
const History = () => {
const history = useHistory();
const goBack = () => {
history.goBack();
};
const push = () => {
history.push('/');
};
return (
<>
<h1>This is useHistory</h1>
{/* This is reditect to theprevious page */}
<button className='goBack_push' onClick={goBack}>
Go Back
</button>
{/* This is push to the home page */}
<button className='goBack_push' onClick={push}>
Push
</button>
</>
);
};
export default History;
Input in react (using example)
import React, { useState } from 'react';
import Back from '../Component/Back';
const SearchImg = () => {
const [img, setImg] = useState('');
const search = e => {
const data = e.target.value;
e.preventDefault();
setImg(data);
console.log(img);
};
const Simg = `https://source.unsplash.com/400x300?${img}`;
const imgStyle = {
height: 300,
width: 400,
border: '5px solid red',
};
return (
<>
<Back />
<div> className='dearchImg'>
<input
type='text'
value={img}
onChange={search}
placeholder='Search here...'
/>
<br />
{img === '' ? null : <img src={Simg} alt='img' style={imgStyle} />}
</div>
</>
);
};
export default SearchImg;