SearchBar component in react 🚀🌕🔥

This post is about creating a search bar component that can be used as a reusable component throughout the app. This is also important to not that component not only useful to reuse but also to intact same design to the app. Not to mention the seamless experience of the app.

Table of content

1. What are props.
2. What are components.
3. How to send data from child component to parent component
4. Code

What is props

Props are nothing but the data which can be send to child components as a property of that function. If you know a little to too much about coding you'd know that when we write simple code in any language we pass the arguments to that function. Not to mention that a component is a function itself and JSX superpowers 💪. So we actually writing a function but with an actual visualization. Props are the arguments that we can pass to a function. It can be variable, string, array or even a function.

What is component

As I mentioned above. Components are nothing but just plain js function if you exclude the jsx from it. If you include it it become component. We are writing a function and just visualizing it using html. We can create a bunch of boxes, buttons, inputs etc and all of it put in a function. As we know function can take arguments and use those arguments as their value. The fancy thing about component is just we are getting these arguments out of scope of that function in fact from another file. So to make sure those arguments work in other function scope we send them as props. Rest react handle in the background.

How to send data from child component to parent component

Normally in react apps data flow from parent to div like water flows down from a cliff of a waterfall.

BUT!!! what if we want that water to climb up to that cliff.

In that case we use props.

Lets understand this concept by an example.

parent component

import React,{useState} from 'react'
function parent(){
const [input, setInput] = useState('');
console.log(input);
return(
<div className='box'>
<input type = 'text' value={input || ''} onChange(e => setInput(e.target.value)/>
<p>{input}</p>
</div>
)

In the above code you can get the value from input tag to you input state. But what if you need search in multiple component. You have to write the same code multiple times not the mention the css properties.

But if you create a seach component you don't need to write same code again and again. See the below example

Same parent with SearcBar component

import React,{useState} from 'react'
import SearchBar from '../SearchBar/'
function parent(){
const [input, setInput] = useState(''); //error
console.log(input); //error
return(
<div className='box'>
<SearchBar/>
<p>{input}</p> //nothing will show on dom
</div>
)

But How the hell we get input value from search component?
We do by using props.

parent component with props

import React,{useState} from 'react'
import SearchBar from '../SearchBar/'

function parent(){
const [input, setInput] = useState('')


//function
const handleOnChange = value => {
setInput(value); 
}
console.log(input);
return(
<div className='box'>
<SearchBar handleOnChange={handleOnChange}/>
<p>{input}</p>
</div>
)

Cild component SeachBar

import React from 'react'

export default const SearchBar = props => {
return(
<input type='text' onChange={e => props.handleOnChange(e.target.value)}/>
)
}

And Thats how you fetch data from child component