Pass search value from one component to another container and use it in React

Asked
Active3 hr before
Viewed126 times

7 Answers

containersearchcomponentreactvalue
90%

Now I want to decouple the search functionality from productsPage.,Find centralized, trusted content and collaborate around the technologies you use most.,I stumbled upon this question after searching a lot,Please be sure to answer the question. Provide details and share your research!

This is products.js file where I need items to be searched.

function ProductsPage() {
  var categories = data.categories;
  const [search, setSearch] = useState(null);

  return (
    <>
      <Container fluid id="searchBar">
        <SearchForm searchValue={search} />
      </Container>
      <Container fluid id="productPage">
        <h2 className="text-center py-5">Our Products</h2>
        <CardColumns className="pt-3 mb-5">
          {categories.map((catNames) => (
            <Fragment key={uuid()}>
              {catNames.sub_categories.map((subCat) => (
                <Fragment key={uuid()}>
                  {subCat.items
                    .filter((item) => {
                      if (search == null) return item;
                      else if (
                        item.itemName
                          .toLowerCase()
                          .includes(search.toLowerCase())
                      ) {
                        return item;
                      }
                    })
                    .map((item) => {
                      return (
                        <Card className="mb-4 p-3" key={uuid()}>
                          <div className="prodBorder">
                            <Card.Title className="pt-5 pb-4 text-center">
                              {item.itemName}
                            </Card.Title>
                            <Card.Img
                              src={`${item.image.url}`}
                              className="d-block w-50 mx-auto my-3"
                            />
                            <Card.Subtitle className="pb-4 text-center text-muted">
                              {item.itemDesc}
                            </Card.Subtitle>
                          </div>
                        </Card>
                      );
                    })}
                </Fragment>
              ))}
            </Fragment>
          ))}
        </CardColumns>
      </Container>
    </>
  );
}

export default ProductsPage;
load more v
88%

Use the variable this.props.dataFromParent to obtain the data passed from parent to child.,Passing data from parent to child using props,Passing data from child to parent employing callbacks,From Parent to Child Using Props

1 App
2└── Parent
3├── Child1
4└── Child2
load more v
72%

I will build a simple react app with 2 inputs, where their values will be completely synchronized. In this article I will explain how easy to send data between react sibling components using the most recent react features.,All the next changes will be completely the same for both input components. First we need to import useContext from react.,Now create function reducer , which will update our initial state every time, when the value of any inputs will be changed. We will use this function with useReducer,Now, type something in any input fields and you will see that both inputs will be updated and will contain the same values.

Create react project

npx create - react - app sync_inputs

After that you need to navigate to folder sync_inputs and start the app

cd sync_inputsnpm start

Install Material UI core library and their icon library for making nice UI

npm install @material - ui / corenpm install @material - ui / icons

Now your package.json file should looks like this:

{
   "name": "sync_inputs",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
      "@material-ui/core": "^4.5.0",
      "@material-ui/icons": "^4.4.3",
      "react": "^16.10.2",
      "react-dom": "^16.10.2",
      "react-scripts": "3.2.0"
   },
   "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
   },
   "eslintConfig": {
      "extends": "react-app"
   },
   "browserslist": {
      "production": [">0.2%", "not dead", "not op_mini all"],
      "development": ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"]
   }
}
load more v
65%

State: While props allow you to pass data from a parent component to a child component, the state is used to change the component, well, state from within. Changes to the state also trigger a UI update.,Props: It allows you to pass data from a parent component to a child component.,The props and state are the main concepts of React. Actually, only changes in props and/ or state trigger React to rerender your components and potentially update the DOM in the browser,Sending state/props to another component using the onClick event: So first we store the state/props into the parent component i.e in which component where we trigger the onClick event. Then to pass the state into another component, we simply pass it as a prop. For a better understanding look at this example.

75%

Since you will find always the props in the function signature, which most of the time is only the container object of your data, but not the data to be used, you can destructure the props early in the function signature. One would call it React props destructuring:,But you can also pass other data structures with inline props. In case of objects, it can be confusing for React beginners, because you have two curly braces: one for the JSX and one for the object. That’s especially confusing when passing a style object to a style attribute in React the first time.,In a functional stateless component, the props are received in the function signature as arguments:,Note: It is important to note that is could lead to performance issues because every time the component renders a new object is created again. But it can be a premature optimization as well when learning only about React.

Normally you start out with React’s JSX syntax for rendering something to the browser when learning about React. Basically, JSX mixes HTML with JavaScript to get the best of both worlds.

import React, { Component } from 'react';class App extends Component {  render() {    const greeting = 'Welcome to React';    return (      <div>        <h1>{greeting}</h1>      </div>    );  }}export default App;
load more v
40%

//Form (Parent)
import React, { useState, Component } from 'react';
import Input from '../../shared/input-box/InputBox'

const Form = function (props) {

    const [value, setValue] = useState('');

    const onchange = (data) => {
        setValue(data)
        console.log("Form>", data);
    }

    return (
        <div>
            <Input data={value} onchange={(e) => { onchange(e) }}/>
        </div>
    );
}
export default Form;

//Input Box (Child)
import React from 'react';

const Input = function (props) {
    console.log("Props in Input :", props);

    const handleChange = event => {
        props.onchange(event.target.value);
    }

    return (
        <div>
            <input placeholder="name"
                id="name"
                onChange= {handleChange}
            />
        </div>
    );
}
export default Input;
load more v
22%

Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common ancestor. Let’s see how this works in action.,These two functions convert numbers. We will write another function that takes a string temperature and a converter function as arguments and returns a string. We will use it to calculate the value of one input based on the other input.,Inside these methods, the Calculator component asks React to re-render itself by calling this.setState() with the new input value and the current scale of the input we just edited.,For example, if we enter 37 into the Celsius input, the state of the Calculator component will be:

load more v

Other "container-search" queries related to "Pass search value from one component to another container and use it in React"