CODEWITHSUNDEEP
javascriptreactjs
Ahmed Mohamed Abdo
Ahmed Mohamed Abdo

Reputation: 97

React TypeError: Cannot read property 'searchField' of undefined

TypeError: Cannot read property 'searchField' of undefined
Function.mapStateToProps [as mapToProps]
C:/Users/windw/Desktop/robofriends/src/containers/App.js:11
   8 | 
   9 | const mapStateToProps = state => {
  10 |     return {
> 11 |         searchField: state.searchRobots.searchField
  12 |     }
  13 | }
  14 |

Code Part

Upvotes: 1

Views: 1114

Answers (5)

attiliogiglio
attiliogiglio

Reputation: 1

you probably are doing a course from udemy. That has this example. Because I did it also. If you not, no worries, It´s the same exercise and I got the debugg for you. When you use redux with just one global state, using createStore, you don´t add the variable searchRobots to the key searchField, instead, It should be state.searchField,

Upvotes: 0

Ehimare
Ehimare

Reputation: 109

For those following aneagoie course and still having this issue, the easiest hack you can do is to import searchRobots from reducers into your App.js and change 

searchField: state.searchRobots.searchField

to

searchField: searchRobots(state.searchField)

This worked perfectly and easily for me.

Upvotes: 0

badarpro
badarpro

Reputation: 26

use this searchField: state.searchField instead of searchField: state.searchRobots.searchField

And you instructor will also guide you to remove searchRobots in later part of video.

Upvotes: 1

Avanthika
Avanthika

Reputation: 4182

I made a copy of your code and have attached working snippet here. Only change you have to make is in the <SearchBox /> as shown. I don't see why you are using redux though. Make sure to update the global state only if needed.

Hope this is helpful!

const CardList = ({ robots }) => {
  return (
    <div>
      {robots.map((user, i) => {
        return (
          <div
            key={i}
            className="bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5"
          >
            <img
              src={`https://robohash.org/${user.id}?200x200`}
              alt="Robot Based On Char."
            />
            <div>
              <h2>{user.name}</h2>
              <p>{user.email}</p>
            </div>
          </div>
        );
      })}
    </div>
  );
};

const SearchBox = ({ searchfield, searchChange }) => {
  return (
    <div>
      <input
        className="pa3 ba b--green bg-lighttest-blue"
        type="search"
        placeholder="search robots"
        onChange={e => searchChange(e)}
      />
    </div>
  );
};

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      robots: [],
      searchfield: ""
    };
  }

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then(users => this.setState({ robots: users }));
  }

  onSearchChange = event => {
    this.setState({ searchfield: event.target.value });
  };

  render() {
    const { robots, searchfield } = this.state;
    const filteredRobots = robots.filter(robot => {
      return robot.name.toLowerCase().includes(searchfield.toLowerCase());
    });
    return (
      <div>
        <SearchBox searchChange={this.onSearchChange} />
        <CardList robots={filteredRobots} />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.5.3/react-dom.min.js"></script>

Upvotes: 0

Manu
Manu

Reputation: 10944

Its evident that searchRobots does not exist on state/store or is empty. Can you check to ensure you are referring to correct property searchRobots in state?

Upvotes: 1

Related Questions