import React, { Component } from "react";
import Cardlist from "../components/Cardlist";
import { robots } from "../robots";
import { connect } from "react-redux";
import Searchlist from "../components/Searchlist";
import { searchRobots } from "../reducers.js";
import "./App.css";
import { setSearchfield } from "../actions.js";
const mapStatetoProps = (state) => {
return {
Searchfield: searchRobots(state.Searchfield),
};
};
const mapDispatchtoProps = (dispatch) => {
return {
SearchChange: (event) => dispatch(setSearchfield(event.target.value)),
};
};
class App extends Component {
constructor() {
super();
this.state = {
robots: robots,
};
}
render() {
console.log(this.props.store);
const { Searchfield, SearchChange } = this.props;
const filteredRobots = this.state.robots.filter((robots) => {
return robots.name.toLowerCase().includes(Searchfield.toLowerCase());
});
return (
<div className="tc">
<h1 className="f1 jack">Robofriends </h1>
<Searchlist SearchChange={SearchChange} />
<Cardlist robots={filteredRobots} />
</div>
);
}
}
export default connect(mapStatetoProps, mapDispatchtoProps)(App);
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>
) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.