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

[fast_developer]

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;

[kirupa]

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

[fast_developer]

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.

[kirupa]

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

[fast_developer]

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!

[fast_developer]

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 |

50 | Title: {item.title} | ProductId:{item.product.id}
| ^
51 |
52 |
53 |

Thanks again,

[fast_developer]

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,

[kirupa]

Can you post your full App.js code?

[fast_developer]

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;

[kirupa]

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:

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.

[fast_developer]

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!

[krilnon]

Happy birthday!!!

[REB_412]

Happy 40th birthday.

[kirupa]

Happy 40th birthday!!!