I have a code that get data of a json-server. And to render seven names in the screen. I want to filter by input and to render only the elements filtereds.

My Apps.js:

class AppRouter extends React.Component {
  state = {
employeeCurrent: [],
employee: []
  };

  ponentDidMount() {
axios
  .get("http://127.0.0.1:3004/employee")

.

then(response => this.setState({ employee: response.data }));
  }

  add = name => {
this.setState(prevState => {
  const copy = prevState.employeeCurrent.slice();
  copy.push(name);
  return {
    employeeCurrent: copy
  };
});
  };

  render() {
return (
  <Router>
    <div className="router">
      <Route
        exact
        path="/"
        render={props => (
          <Home
            {...props}
            add={this.add}
            employee={this.state.employee}
            currentEmployee={this.state.currentEmployee}
          />
        )}
      />
      <Route
        path="/user/:id"
        ponent={props => (
          <User
            {...props}
            employee={this.state.employee}
            currentEmployee={this.state.currentEmployee}
          />
        )}
      />
    </div>
  </Router>
);
  }
}

My body.js (Where has the function for to render)

 class Body extends React.Component {
  getName = () => {
    const { employee, add } = this.props;
    return employee.map(name => (
      <Link className="link" to={`/user/${name.name}`}>
        {" "}
        <div onClick={() => add(name)} key={name.id} className="item">
          {" "}
          <img
            className="img"
            src={`/${name.name}`}
          />{" "}
          <h1 className="name"> {name.name} </h1>
        </div>{" "}
      </Link>
    ));
      };

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

I tried to pass the state to the App. JS but had no success. I tried everything in the Body. JS but also not succeeded. Could someone help me how to do this?

I'm on the phone so there are some things that are bad to indent. Sorry!

I have a code that get data of a json-server. And to render seven names in the screen. I want to filter by input and to render only the elements filtereds.

My Apps.js:

class AppRouter extends React.Component {
  state = {
employeeCurrent: [],
employee: []
  };

  ponentDidMount() {
axios
  .get("http://127.0.0.1:3004/employee")

.

then(response => this.setState({ employee: response.data }));
  }

  add = name => {
this.setState(prevState => {
  const copy = prevState.employeeCurrent.slice();
  copy.push(name);
  return {
    employeeCurrent: copy
  };
});
  };

  render() {
return (
  <Router>
    <div className="router">
      <Route
        exact
        path="/"
        render={props => (
          <Home
            {...props}
            add={this.add}
            employee={this.state.employee}
            currentEmployee={this.state.currentEmployee}
          />
        )}
      />
      <Route
        path="/user/:id"
        ponent={props => (
          <User
            {...props}
            employee={this.state.employee}
            currentEmployee={this.state.currentEmployee}
          />
        )}
      />
    </div>
  </Router>
);
  }
}

My body.js (Where has the function for to render)

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

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

I tried to pass the state to the App. JS but had no success. I tried everything in the Body. JS but also not succeeded. Could someone help me how to do this?

I'm on the phone so there are some things that are bad to indent. Sorry!

• javascript
• reactjs

Share Improve this question Follow asked May 1, 2018 at 22:06 JotaJota 86566 gold badges2525 silver badges4242 bronze badges 11

• Where is the filtering happening here? – Abid Hasan Commented May 1, 2018 at 22:35
• so If I am not wrong you want to filter the names according to the input right? – MontyGoldy Commented May 1, 2018 at 22:46
• @AbidHasan this code not be – Jota Commented May 1, 2018 at 22:49
• @MontyGoldy yes, they are.. – Jota Commented May 1, 2018 at 22:50
• 1 man, you can use "filter" high order function to get the result. For eg:- const filteredNames = this.state.employee.filter(x => x.name === (check with the input value)) – MontyGoldy Commented May 1, 2018 at 22:57

 |  Show 6 more ments

1 Answer 1

Sorted by: Reset to default 3

Try this,

class Body extends React.Component {
  getName = () => {
    const { employee, add } = this.props;

    //Filter  names in employee array with input 

    const filterNames = employee.filter(x => x.name === "check with the input value" );

     // Then map over the filtered names

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

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