How to pass a state without to import component ReactJS?

how to pass state from one component to another
react pass state as props to child components
react pass component as prop
react useeffect
react hooks
react share state between components
react context
react pass state to parent

I have a program with two different routes (Body.js andUser.js) through a function of Body.js I save a value in the state named employeeCurrent and I want to use this employeeCurrent on the User.js route.

I wanted to know how to do this, without having to import User.js into Body.js because there, the User.js would appear along with Body.js.

My Body.js with function:

import React from "react";
import "./Body.css";
import axios from "axios";
import { Link } from "react-router-dom";

class Body extends React.Component {
  constructor() {
    super();

    this.state = {
      employee: [],
      employeeCurrent: []
    };
  }

  componentDidMount() {
    axios
      .get("http://127.0.0.1:3004/employee")
      .then(response => this.setState({ employee: response.data }));
  }

  getName = () => {
    const { employee } = this.state;
    return employee.map(name => (
      <Link className="link" to={`/user/${name.name}`}>
        {" "}
        <div onClick={() => this.add(name)} key={name.id} className="item">
          {" "}
          <img
            className="img"
            src={`https://picsum.photos/${name.name}`}
          />{" "}
          <h1 className="name"> {name.name} </h1>
        </div>{" "}
      </Link>
    ));
  };

  add = name => {
    const nam = name;
    this.state.employeeCurrent.push(nam);
    console.log(this.state.employeeCurrent);
  };

  render() {
    return <div className="body">{this.getName()}</div>;
  }
}

export default Body;
Lift State To Container Component

The best practice here would be to lift state up to a container component, or to use something like Redux or Apollo or the new React Context and manage a state at the top level. If you don't want to lift state up to Home.js (maybe doesn't belong there), then a container that would render Body.js or User.js, depending on the route.

Route Container Pattern

You can create a layout component eg. DashboardContainer that would manage data for a collection of routes like the following:

<Router>
  <Switch>
    <DashboardContainer
      exact
      path="/body"
      component={Body}
      {...props}
    />
    <DashboardContainer
      exact
      path="/user"
      component={User}
      {...props}
    />
    <Route component={NotFound} />
  </Switch>
</Router>

So here we are using the DashboardContainer for /body and /user routes. Then router would pass Body or User components to it which would receive the props and state the container has:

export class DashboardContainer extends React.Component {
  state = {
    employeeCurrent: null,
  };

  render() {
    const {
      drawerOpen,
      loggingIn,
      authenticated,
      component,
      user,
      history,
      ...rest
    } = this.props;
    const { employeeCurrent } = this.state;
    return (
      <div>
        <DashboardNavigation
          drawerOpen={this.props.drawerOpen}
          history={this.props.history}
          authenticated={authenticated}
          user={user}
        />
        <Route
          {...rest}
          render={props => React.createElement(
            component,
            {
              ...props,
              employeeCurrent,
              authenticated,
              user,
            },
          )}
        />
      </div>)
  }
}

Note our Route exists inside DashboardContainer. Then the router still controls which component you want to render (User.js or Body.js), but data is always passed in. Also including a DashboardNavigation component here to illustrate how this could be used for a layout (or any other form of shared data...).

It is also extendable if you want to create other components that will share the same data or layout, or if you want to protect routes (eg. only render React.createElement if authenticated = true, otherwise render a Redirect component).

Passing Data Between React Components - Ruth M. Pardee, How do you pass state from child to parent reaction? Calls to setState are asynchronous - don’t rely on this.state to reflect the new value immediately after calling setState. Pass an updater function instead of an object if you need to compute values based on the current state (see below for details).

You need to lift the state up:

Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common ancestor.

That's exactly what you need to do. Home should keep employeeCurrent and pass it to Body and User.

Another approach would be to use state management libraries like redux or mobx.

React functional component using state, They let you use state and other React features without writing a class. import React, { useState } from 'react'; function Example() { // Declare a new state variable for how many times the user clicked, so pass 0 as initial state for our variable. In this post, i'll explain how to pass a state between components in Reactjs. We'll build a small 'How many books did you read?' app, in this application, we have two main components one big called 'Library' and another small 'Book', we have 3 books in the library state and each book has its own state. check any book to count as read. try the

If you want pass your state once and do not going to update it you can stringify it and pass by url.

<Link className='link' to={`/user/${name.name}?employeeCurrent=${JSON.stringify(this.state.employeeCurrent)}`}>

But it is bad practice and used when you do not want to use flux libraries.

So another and correct way is to use redux library and save and manage your employees in there.

Using the State Hook – React, Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common ancestor. For now, let's pretend this.props.temperature already exists, although we will need to pass it is coming from the parent as a prop, the TemperatureInput has no control over it. Of course props may pass down state-like ideas - for example, on a custom input component, I may choose to have a disabled prop which disables some internal text input - but when I say “state”, I’m referring specifically to the state attribute of the component. You may begin to notice a code smell when the state starts to depend on it’s

Lifting State Up – React, This lets other components pass arbitrary children to them by nesting the JSX: function <input value={this.state.login} onChange={this. The components may import it and use that function, object, or a class, without extending it. Then the data is managed as state in the top level component but still can be distributed to all child components. Props can be state, props, or derived properties. Regardless of passing props or state to a component, the component just receives the data as props. It doesn't differentiate between props or state. Everything incoming is props, everything managed by the component itself is state.

Composition vs Inheritance – React, How to pass state between components in reactjs (Full Code). Tagged with react, javascript, code, frontend. What do we pass to useState as an argument? The only argument to the useState() Hook is the initial state. Unlike with classes, the state doesn’t have to be an object. We can keep a number or a string if that’s all we need. In our example, we just want a number for how many times the user clicked, so pass 0 as initial

How to pass state between components in reactjs, import React, { Component } from 'react';. const list = ['a', 'b', 'c'];. class App extends Component {. constructor(props) {. super(props);. this.state  Passing Functions to Components. make sure functions have access to component attributes like this.props and this.state, pass the function itself (without