score:0

check your server is running or not. if not run it again by using node index.js. and your server-side port should be different

score:0

include app.use(cors({origin: "*",})) in your backend index.js

score:0

Make sure you run a different port for your server and the front-end... You can have the frontend run on localhost:3000 and specify like localhost:2233 for the server.

score:1

class App extends Component {
  constructor(props) {
    super(props);
    state = { users: null }
  }
  goToUsers() {
    //just put your request directly in the method
    fetch('http://localhost:300/users')
      .then(response => {
        //do something with response
        const users = response.json();
        this.setState({ users })
      })
      .catch(err => {
        throw new Error(err)
      })
  }

  render() {
    return (
      <MuiThemeProvider>
        <div className="App">
          <div className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h2>Welcome to React</h2>
          </div>
          <p className="App-intro">
            To get started, edit <code>src/App.js</code> and save to reload.
          </p>
          <br />
          <br />
          <TextField hintText="Login" />
          <br />
          <TextField hintText="Password" type="password" />
          <br />
          <br />
          <RaisedButton label="Login" onTouchTap={this.goToUsers}/>
        </div>
      </MuiThemeProvider>
    );
  }
}

score:1

At first, make sure the endpoint of your API is correct and the server is running successfully without any issue. You can use Postman to test your API. Once your API is running successfully then you can make a request from the front-end(react.js).

fetch('localhost:3000/users')
    .then(response => {
      if (!response.ok) {
        throw new Error(response.statusText)
      }
      return response.json()
    }).catch(err=>{
    console.log(err)
})

Use catch for handling all errors.

know more

Thank you.


Related Query

More Query from same tag