Styjun

Was Spock the First Vulcan in Starfleet?

How does buying out courses with grant money work?

Would this custom Sorcerer variant that can only learn any verbal-component-only spell be unbalanced?

A Rare Riley Riddle

Inappropriate reference requests from Journal reviewers

Is this apparent Class Action settlement a spam message?

What does "I’d sit this one out, Cap," imply or mean in the context?

Opposite of a diet

How did Doctor Strange see the winning outcome in Avengers: Infinity War?

What is paid subscription needed for in Mortal Kombat 11?

How can I quit an app using Terminal?

Valid Badminton Score?

Arithmetic mean geometric mean inequality unclear

How does it work when somebody invests in my business?

How can I get through very long and very dry, but also very useful technical documents when learning a new tool?

What is the intuitive meaning of having a linear relationship between the logs of two variables?

Increase performance creating Mandelbrot set in python

System.debug(JSON.Serialize(o)) Not longer shows full string

when is out of tune ok?

How do I rename a Linux host without needing to reboot for the rename to take effect?

Class Action - which options I have?

How to Reset Passwords on Multiple Websites Easily?

How do I go from 300 unfinished/half written blog posts, to published posts?

Term for the "extreme-extension" version of a straw man fallacy?

React TypeError: Cannot read property 'searchField' of undefined

Detecting an undefined object propertyTest if something is not undefined in JavaScriptWhy does jQuery or a DOM method such as getElementById not find the element?React - uncaught TypeError: Cannot read property 'setState' of undefinedreact + redux: Cannot read property 'handleClickMenu' of undefinedTypeError: Cannot read property 'fishes' of undefinedReact propType cannot read property of undefinedTypeError: Cannot read property 'location' of undefined in reactTypeError: Cannot read property 'filter' of undefined in reactReact TypeError: Cannot read property 'push' of undefined

0

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 => return 
> 11 
 13 
 14 | 

javascript reactjs

share|improve this question

edited Mar 21 at 15:20

adiga

12k62545

asked Mar 21 at 15:15

Ahmed Mohamed AbdoAhmed Mohamed Abdo

133

New contributor

Ahmed Mohamed Abdo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  sorry searchField instead of toLowerCase
  
  – Ahmed Mohamed Abdo
  Mar 21 at 15:16
  

  
  
  
  


• 
  
  
  

  
  3
  

  
  
  
  
  
  

  
  
  Can you please copy paste your component code instead of the image?
  
  – Avanthika
  Mar 21 at 15:17
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  There is no searchRobots in state
  
  – adiga
  Mar 21 at 15:21
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  github.com/ahmedabdo97/robofriends thats the link for project
  
  – Ahmed Mohamed Abdo
  Mar 21 at 15:36
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  github.com/ahmedabdo97/robofriends/blob/master/src/containers/…
  
  – Ahmed Mohamed Abdo
  Mar 21 at 15:36
  

  
  
  
  

 | 
show 1 more comment

0

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 => return 
> 11 
 13 
 14 | 

javascript reactjs

share|improve this question

edited Mar 21 at 15:20

adiga

12k62545

asked Mar 21 at 15:15

Ahmed Mohamed AbdoAhmed Mohamed Abdo

133

New contributor

Ahmed Mohamed Abdo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  sorry searchField instead of toLowerCase
  
  – Ahmed Mohamed Abdo
  Mar 21 at 15:16
  

  
  
  
  


• 
  
  
  

  
  3
  

  
  
  
  
  
  

  
  
  Can you please copy paste your component code instead of the image?
  
  – Avanthika
  Mar 21 at 15:17
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  There is no searchRobots in state
  
  – adiga
  Mar 21 at 15:21
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  github.com/ahmedabdo97/robofriends thats the link for project
  
  – Ahmed Mohamed Abdo
  Mar 21 at 15:36
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  github.com/ahmedabdo97/robofriends/blob/master/src/containers/…
  
  – Ahmed Mohamed Abdo
  Mar 21 at 15:36
  

  
  
  
  

 | 
show 1 more comment

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 => return 
> 11 
 13 
 14 | 

javascript reactjs

share|improve this question

edited Mar 21 at 15:20

adiga

12k62545

asked Mar 21 at 15:15

Ahmed Mohamed AbdoAhmed Mohamed Abdo

133

New contributor

Ahmed Mohamed Abdo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

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 => return 
> 11 
 13 
 14 | 

share|improve this question

edited Mar 21 at 15:20

adiga

12k62545

asked Mar 21 at 15:15

Ahmed Mohamed AbdoAhmed Mohamed Abdo

133

New contributor

Ahmed Mohamed Abdo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

share|improve this question

edited Mar 21 at 15:20

adiga

12k62545

asked Mar 21 at 15:15

Ahmed Mohamed AbdoAhmed Mohamed Abdo

133

New contributor

Ahmed Mohamed Abdo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

edited Mar 21 at 15:20

adiga

12k62545

edited Mar 21 at 15:20

adiga

12k62545

asked Mar 21 at 15:15

Ahmed Mohamed AbdoAhmed Mohamed Abdo

133

New contributor

Ahmed Mohamed Abdo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

asked Mar 21 at 15:15

Ahmed Mohamed AbdoAhmed Mohamed Abdo

133

2 Answers
2

active

oldest

votes

0

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>

share|improve this answer

answered Mar 21 at 15:55

AvanthikaAvanthika

1,050513

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I could not find any redux code in the file github.com/ahmedabdo97/robofriends/blob/master/src/containers/… as stated in error.
  
  – Vishal Gulati
  Mar 21 at 16:05
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  yea, in the screenshot he has given to us, he has added some redux code. I couldn't figure out why he did that though.
  
  – Avanthika
  Mar 21 at 16:09
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  actually i was adding it was part of my course to learn how to use it but honestly i still donot understand myself why he put it there
  
  – Ahmed Mohamed Abdo
  Mar 21 at 19:55
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  haha :) okay. In the above solution I've given, we are just binding the function to onclick handler.
  
  – Avanthika
  Mar 21 at 20:24
  

  
  
  
  

add a comment | 

1

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?

share|improve this answer

answered Mar 21 at 15:17

Vishal GulatiVishal Gulati

4,13833967

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i added the complete project and the file cause iam new and still didnot understand alil what u mean
  
  – Ahmed Mohamed Abdo
  Mar 21 at 15:37
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I dont see any REDUX code in your repo. What I mean to say is, The store does not seem to have searchRobots property.
  
  – Vishal Gulati
  Mar 21 at 15:49
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

Ahmed Mohamed Abdo is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55283689%2freact-typeerror-cannot-read-property-searchfield-of-undefined%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

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>

share|improve this answer

answered Mar 21 at 15:55

AvanthikaAvanthika

1,050513

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I could not find any redux code in the file github.com/ahmedabdo97/robofriends/blob/master/src/containers/… as stated in error.
  
  – Vishal Gulati
  Mar 21 at 16:05
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  yea, in the screenshot he has given to us, he has added some redux code. I couldn't figure out why he did that though.
  
  – Avanthika
  Mar 21 at 16:09
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  actually i was adding it was part of my course to learn how to use it but honestly i still donot understand myself why he put it there
  
  – Ahmed Mohamed Abdo
  Mar 21 at 19:55
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  haha :) okay. In the above solution I've given, we are just binding the function to onclick handler.
  
  – Avanthika
  Mar 21 at 20:24
  

  
  
  
  

add a comment | 

0

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>

share|improve this answer

answered Mar 21 at 15:55

AvanthikaAvanthika

1,050513

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I could not find any redux code in the file github.com/ahmedabdo97/robofriends/blob/master/src/containers/… as stated in error.
  
  – Vishal Gulati
  Mar 21 at 16:05
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  yea, in the screenshot he has given to us, he has added some redux code. I couldn't figure out why he did that though.
  
  – Avanthika
  Mar 21 at 16:09
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  actually i was adding it was part of my course to learn how to use it but honestly i still donot understand myself why he put it there
  
  – Ahmed Mohamed Abdo
  Mar 21 at 19:55
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  haha :) okay. In the above solution I've given, we are just binding the function to onclick handler.
  
  – Avanthika
  Mar 21 at 20:24
  

  
  
  
  

add a comment | 

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>

share|improve this answer

answered Mar 21 at 15:55

AvanthikaAvanthika

1,050513

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>

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>

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>

share|improve this answer

answered Mar 21 at 15:55

AvanthikaAvanthika

1,050513

answered Mar 21 at 15:55

AvanthikaAvanthika

1,050513

answered Mar 21 at 15:55

AvanthikaAvanthika

1,050513

1

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?

share|improve this answer

answered Mar 21 at 15:17

Vishal GulatiVishal Gulati

4,13833967

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i added the complete project and the file cause iam new and still didnot understand alil what u mean
  
  – Ahmed Mohamed Abdo
  Mar 21 at 15:37
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I dont see any REDUX code in your repo. What I mean to say is, The store does not seem to have searchRobots property.
  
  – Vishal Gulati
  Mar 21 at 15:49
  

  
  
  
  

add a comment | 

1

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?

share|improve this answer

answered Mar 21 at 15:17

Vishal GulatiVishal Gulati

4,13833967

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i added the complete project and the file cause iam new and still didnot understand alil what u mean
  
  – Ahmed Mohamed Abdo
  Mar 21 at 15:37
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I dont see any REDUX code in your repo. What I mean to say is, The store does not seem to have searchRobots property.
  
  – Vishal Gulati
  Mar 21 at 15:49
  

  
  
  
  

add a comment | 

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?

share|improve this answer

answered Mar 21 at 15:17

Vishal GulatiVishal Gulati

4,13833967

share|improve this answer

answered Mar 21 at 15:17

Vishal GulatiVishal Gulati

4,13833967

answered Mar 21 at 15:17

Vishal GulatiVishal Gulati

4,13833967

answered Mar 21 at 15:17

Vishal GulatiVishal Gulati

4,13833967