Understanding props in ReactJS
ReactJs is an open-source, front end, JavaScript library for building user interfaces or UI components.
ReactJs makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
**What then is Props you asked**
Props in ReactJs can be referred to as properties that are used to pass data (additional information) to a component and can be accessed globally. If you are coming from an HTML background think of props as attributes you give a tag.
Props in ReactJs can be passed down to component following a unidirectional flow from top-bottom or parent-child either in a class-based component or functional component.
In this article, we will be creating forms (Sign up/Sign in) where we also create a reusable input and button component using props to change the value dynamically from parent-child component.
So before we start writing out the codes, let’s first bootstrap our application using npm create-react-app <project-folder>or npx create-react-app <project-folder>
After bootstrapping the application, we need to cd (change directory) to where the project folder leaves (which in this case, the folder leaves on Desktop) and into the project folder (which in this case it’s notey)
if the bootstrapping goes out well, you should have the same as shown on the text editor below.
Next up is to create a component folder inside the src to house the components we will be creating
Inside the components folder, we will create the files (components) we need such as
- Navbar component (to navigate between pages)
- input component (to accept text)
- button component (to trigger an action)
- signup component (to hold the signup form)
- sign in component (to hold the sign-in form)
Next is to install a dependency called react-router-dom to help between navigating pages (As of time of writing this article v5 was installed)
// Copy this code into Navbar componentimport React from ‘react’;
import { NavLink } from ‘react-router-dom’;const Navbar = () => {
return (
<div className=”navbar”>
<NavLink to=’/signin’>
Signin
</NavLink>
<NavLink to=’/signup’>
Signup
</NavLink>
</div>
)
};export default Navbar;
// Copy this code into Input componentimport React from 'react';const Input = (props) => {const { inputType, inputPlaceholder } = props;return ( <input type = {inputType} placeholder = {inputPlaceholder} /> )};export default Input;
// Copy this code into Button componentimport React from 'react';const Button = (props) => {const {buttonText, buttonType, handleClick} = props;return ( <button type={buttonType} onClick={handleClick} > {buttonText} </button> )};export default Button;
// Copy this code into Sign in componentimport React from 'react';import {Link} from 'react-router-dom';import Button from './Button';import Input from './Input';const SigninForm = () => { const handleClick = (e) => { e.preventDefault(); alert('you just Signed in'); }return ( <form> <Input inputType="email" inputPlaceholder="Enter Email Address" /> <Input inputType="password" inputPlaceholder="Enter Password" /> <Button buttonType="submit" buttonText="Sign in" handleClick={handleClick} /> <p> Dont have an account? <Link to="/signup">Signup</Link> </p> </form> )};export default SigninForm;
// Copy this code into Signup componentimport React from 'react';import { Link } from 'react-router-dom';import Button from './Button';import Input from './Input';const SignupForm = () => { const handleClick = (e) => { e.preventDefault() alert('you just signed up') }return ( <form> <Input inputType = "text" inputPlaceholder = "Enter Firstname" /> <Input inputType = "text" inputPlaceholder = "Enter Lastname" /> <Input inputType = "email" inputPlaceholder = "Enter Email Address" /> <Input inputType = "password" inputPlaceholder = "Enter Password" /> <Button buttonType="submit" buttonText = "Sign Up" handleClick={handleClick} /> <p> Already have an account? <Link to='/signin'>Signin</Link> </p> </form> )};export default SignupForm;
// Copy this code into App.js componentimport React from 'react';import {BrowserRouter, Switch, Route} from 'react-router-dom';import Navbar from './components/Navbar';import SigninForm from './components/Signin';import SignupForm from './components/Signup';const App = () => { return ( <BrowserRouter> <Navbar /> <Switch> <Route path='/signin'> <SigninForm /> </Route> <Route path='/signup'> <SignupForm /> </Route> </Switch> </BrowserRouter> );}export default App;
/*Copy this code into index.css component*/{margin: 0px;padding: 0px;box-sizing: border-box;}.navbar{color: #000;box-shadow:0 0 4px 2px rgba(0, 0, 0, 0.2) ;padding: 1.4em;}.navbar a {padding:0px 1em ;}form{width: 30%;margin: 5em auto;padding: 2em 2em;box-shadow: 0 0 4px 2px rgba(38,153,251,.18);}input{width: 100%;margin: 1em 0;padding: 1em;}button{background-color: #56dac5d4;width: 100%;padding: 1em;margin: 1em 0;border: none;cursor: pointer;}
If adding the codes to the necessary components then run npm startor yarn starton your terminal to start the server.
So with this piece, you can see how we created a reusable component which is then used on the sign-up/sign-in to change the data when the component renders.
N.B when creating a reusable component that will change its data dynamically via props, the prop name is meant to be the same on every component that needs it.
For example, let’s go back to the code written. the input component (which acts as the child component) expects some prop value like inputType and inputPlaceholder to be passed from the component which it is been used (in this case the component that it is been used on acts as the parent). The same applies to the button component which expects buttonType, buttonText, and handleClick to be passed from the parent component to the child component.
Reference
