# I need help creating a React app displaying a washing machine...?

**URL:** <https://forum.kirupa.com/t/i-need-help-creating-a-react-app-displaying-a-washing-machine/640039>\
**Category:** Uncategorized\
**Created:** [July 12, 2019, 4:09pm UTC](https://forum.kirupa.com/t/i-need-help-creating-a-react-app-displaying-a-washing-machine/640039 "2019-07-12T16:09:32Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![fast\_developer](https://avatars.discourse-cdn.com/v4/letter/f/e9bcb4/32.png) [@fast\_developer](https://forum.kirupa.com/u/fast_developer)\
**Post date:** [July 12, 2019, 4:09pm UTC](https://forum.kirupa.com/t/i-need-help-creating-a-react-app-displaying-a-washing-machine/640039/1 "2019-07-12T16:09:32Z")

</div>

Hi Kirupa and everyone,

I’m developing a React App which displays washing machines, I would be very grateful for help with this. I keep getting this error message when I test the server code:

C:\Users\info\>npm start washing machine  
npm ERR! path C:\Users\info\package.json  
npm ERR! code ENOENT  
npm ERR! errno -4058  
npm ERR! syscall open  
npm ERR! enoent ENOENT: no such file or directory, open ‘C:\Users\info\package.json’  
npm ERR! enoent This is related to npm not being able to find a file.  
npm ERR! enoent

npm ERR! A complete log of this run can be found in:  
npm ERR! C:\Users\info\AppData\Roaming\npm-cache\_logs\2019-07-12T15\_34\_10\_852Z-debug.log

App.js

```
import React, { Component } from 'react';

class App extends Component {
	
	constructor(props){
		super(props); 
		this.state = {
			items: [],
			isLoaded: false, 
		}
	
	
	}
	
	ComponentDidMount() {
	
	 fetch('https://api.johnlewis.com/v1/products/search?q=dishwasher&key=Wu1Xqn3vNrd1p7hqkvB6hEu0G9OrsYGb&pageSize=20')
	 then(res => res.json())
	 then(json => {
		  this.setState({
			isLoaded.true, 
			items: json, 
						})
		  
		  }); 
		  
	
	
	}

 render() {
	 
	 var { isLoaded, items } = this.state; 
	 
	 if (!isLoaded) {
		 return <div>Loading....</div>;
		 
	 }
	 
	 else {
	 
	 
	 return (
			<div className="App">
						
			<ul>
			{items.map(item => (
				<li key ={item.id}>
				
				      Title: {item.title} | image: {item.id} | 
					  ProductId: {item.product.id} Price: {item.Price} | 
					  additionalServices: {item.additionalServices.id}
					  Details: {item.Details} | 
					  
					  
					  

					  
					  
			
			))};
			
			</ul>
			
			
			
			</div>
			
			); 
 }
 
}

export default App;
```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 12, 2019, 5:51pm UTC](https://forum.kirupa.com/t/i-need-help-creating-a-react-app-displaying-a-washing-machine/640039/2 "2019-07-12T17:51:45Z")

</div>

This may be unrelated to your code itself. Do you have package.json defined at the location the error is mentioning?

---

<div class="post-metadata">

**Author:** ![fast\_developer](https://avatars.discourse-cdn.com/v4/letter/f/e9bcb4/32.png) [@fast\_developer](https://forum.kirupa.com/u/fast_developer)\
**Post date:** [July 12, 2019, 6:54pm UTC](https://forum.kirupa.com/t/i-need-help-creating-a-react-app-displaying-a-washing-machine/640039/3 "2019-07-12T18:54:56Z")

</div>

Hi Kirupa,

Thanks for responding so swiftly, hope you’re well…I’m away from my laptop but no I do not have package.json defined at the location the error is mentioning.

You were really helpful last time I asked a question, do you have a tutorial that will fix this problem please?

Thanks.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 12, 2019, 9:09pm UTC](https://forum.kirupa.com/t/i-need-help-creating-a-react-app-displaying-a-washing-machine/640039/4 "2019-07-12T21:09:26Z")

</div>

How did you create the project? If you used create-react-app, it may be easier to just create a new project and copy/paste your code into it. Fixing environment configuration errors is often a challenge.

I wrote about how you can use create-react-app, if you haven’t used it, here: [https://www.kirupa.com/react/setting\_up\_react\_environment.htm](https://www.kirupa.com/react/setting_up_react_environment.htm)

🙂

---

<div class="post-metadata">

**Author:** ![fast\_developer](https://avatars.discourse-cdn.com/v4/letter/f/e9bcb4/32.png) [@fast\_developer](https://forum.kirupa.com/u/fast_developer)\
**Post date:** [July 12, 2019, 9:37pm UTC](https://forum.kirupa.com/t/i-need-help-creating-a-react-app-displaying-a-washing-machine/640039/5 "2019-07-12T21:37:26Z")

</div>

Hi Karupa,

Yes I used create-react-app so I’ll check your tutorial and get back to you if that doesn’t solve the issue.  
As always really helpful, thanks!

---

<div class="post-metadata">

**Author:** ![fast\_developer](https://avatars.discourse-cdn.com/v4/letter/f/e9bcb4/32.png) [@fast\_developer](https://forum.kirupa.com/u/fast_developer)\
**Post date:** [July 13, 2019, 7:43am UTC](https://forum.kirupa.com/t/i-need-help-creating-a-react-app-displaying-a-washing-machine/640039/6 "2019-07-13T07:43:46Z")

</div>

Hi Kirupa,

Apologies for the miss spelling of your name.

I’ve been through the tutorial and it’s really helped.

However I just get one small error which I’m having problems working out the cause of when I run it:

./src/App.js  
Line 50: Parsing error: Unterminated JSX contents

48 | {items.map(item =\> (  
49 |

-

---

<div class="post-metadata">

**Author:** ![fast\_developer](https://avatars.discourse-cdn.com/v4/letter/f/e9bcb4/32.png) [@fast\_developer](https://forum.kirupa.com/u/fast_developer)\
**Post date:** [July 13, 2019, 2:15pm UTC](https://forum.kirupa.com/t/i-need-help-creating-a-react-app-displaying-a-washing-machine/640039/7 "2019-07-13T14:15:18Z")

</div>

Hi Kirupa,

I saw your acknowledgment earlier thanks.

I don’t know if you’ve managed to look at the coding error yet, I’m not around much tomorrow.

Thanks in advance,

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 13, 2019, 5:25pm UTC](https://forum.kirupa.com/t/i-need-help-creating-a-react-app-displaying-a-washing-machine/640039/8 "2019-07-13T17:25:10Z")

</div>

Can you post your full App.js code? 🙂

---

<div class="post-metadata">

**Author:** ![fast\_developer](https://avatars.discourse-cdn.com/v4/letter/f/e9bcb4/32.png) [@fast\_developer](https://forum.kirupa.com/u/fast_developer)\
**Post date:** [July 13, 2019, 6:11pm UTC](https://forum.kirupa.com/t/i-need-help-creating-a-react-app-displaying-a-washing-machine/640039/9 "2019-07-13T18:11:19Z")

</div>

Here the app.js 🙂

import React, { Component } from ‘react’;

class App extends Component {

```
constructor(props){
	super(props); 
	this.state = {
		items: [],
		isLoaded: false, 
	}

}

ComponentDidMount() {

 fetch('https://api.johnlewis.com/v1/products/search?q=dishwasher&key=Wu1Xqn3vNrd1p7hqkvB6hEu0G9OrsYGb&pageSize=20')
 then(res => res.json())
 then(json => {
	  this.setState({
		isLoaded:true, 
		items: json, 
					})
	  
	  }); 
	  

}

```

render() {

```
 var { isloaded, items } = this.state; 
 
 if (isLoaded) {
	 return <div>Loading....</div>;
	 
 }
 
 else {
 
 
 return (
		<div className="App">
		
		
		{items.map(item => (
			<li key ={item.id}>
			      Title: {item.title} | ProductId:{item.product.id} 
				  

      

       

		))};
		
		
		
		
		
	
		
		); 

```

}

}

export default App;

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 14, 2019, 12:21am UTC](https://forum.kirupa.com/t/i-need-help-creating-a-react-app-displaying-a-washing-machine/640039/10 "2019-07-14T00:21:22Z")

</div>

One thing that will help you in the future is to pay attention to the error message and what it is trying to tell you. While error messages sometimes don’t help you a lot, they almost always do give you some information to help you figure out where to start looking 👀

For this error, it seems like something is wrong between lines 48 and 49 based on the message and it involves something with the code in your `return` block. If you look at your code editor, you should see some adequate visual cues that something is up as well:

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/d/d8c335c659e1e8a1dd7b72f632ae624c26478cbd.png)

What this looks like is you have some element or tag that isn’t properly closed off. That loosely matches the error you see as well. I don’t know if what I’m about to paste will fix your issue, for I don’t have your full project. All I did was ensure that spaces and line breaks were properly inserted to ensure everything was syntactically valid and avoid this particular error 😛

The formatted code is below:

```
import React, { Component } from ‘react’;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      isLoaded: false,
    }
  }

  componentDidMount() {
    fetch('https://api.johnlewis.com/v1/products/search?q=dishwasher&key=Wu1Xqn3vNrd1p7hqkvB6hEu0G9OrsYGb&pageSize=20')
    then(res => res.json())
    then(json => {
      this.setState({
        isLoaded: true,
        items: json,
      })
    });
  }

  render() {
    var { isloaded, items } = this.state;

    if (isLoaded) {
      return <div>Loading....</div>;
    } else {
      return (
        <div className="App">
          {
            items.map(item => (
              <li key={item.id}>
                Title: {item.title} | ProductId:{item.product.id}
              </li>
            ))}
        </div>
      );
    }
  }
}

export default App;

```

Also note that you had `componentDidMount` capitalized. The proper use for it is in a lower-case form. Otherwise, the React code won’t actually call it.

Properly formatting your document will help you greatly in ensuring your code is easily readable and contains fewer errors around missing closing tags, brackets, parentheses, etc.

🙂

---

<div class="post-metadata">

**Author:** ![fast\_developer](https://avatars.discourse-cdn.com/v4/letter/f/e9bcb4/32.png) [@fast\_developer](https://forum.kirupa.com/u/fast_developer)\
**Post date:** [July 14, 2019, 5:09am UTC](https://forum.kirupa.com/t/i-need-help-creating-a-react-app-displaying-a-washing-machine/640039/11 "2019-07-14T05:09:41Z")

</div>

Hi Kirupta, can’t thank you enough. Today is my 40th birthday so am away from laptop but will work through your great advice this evening!

---

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [July 14, 2019, 6:11pm UTC](https://forum.kirupa.com/t/i-need-help-creating-a-react-app-displaying-a-washing-machine/640039/12 "2019-07-14T18:11:51Z")

</div>

Happy birthday!!!

---

<div class="post-metadata">

**Author:** ![REB\_412](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/reb_412/32/9233_2.png) [@REB\_412](https://forum.kirupa.com/u/REB_412)\
**Post date:** [July 14, 2019, 11:24pm UTC](https://forum.kirupa.com/t/i-need-help-creating-a-react-app-displaying-a-washing-machine/640039/13 "2019-07-14T23:24:19Z")

</div>

Happy 40th birthday.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 15, 2019, 3:26am UTC](https://forum.kirupa.com/t/i-need-help-creating-a-react-app-displaying-a-washing-machine/640039/14 "2019-07-15T03:26:43Z")

</div>

Happy 40th birthday!!! 🍰