Using react/node - how do I get user submitted information to show up on screen

const express = require('express')
const app = express()
const port = 3001

let registrations = [];

app.use(express.json())

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.post('/newPerson', (req, res) => {
  let newItem = req.body
  registrations.push(newItem)
  res.send()
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})
import React from 'react';
import Form from './Components/Form';
import axios from 'axios';


class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      name: '',
      comment: ''
    }
this.onInputChange = this.onInputChange.bind(this);
  }

onInputChange (event) {
  event.preventDefault();
  this.setState({
    [event.target.name]: event.target.value
  })
}

onFormSubmit (event) {
  event.preventDefault();

  axios.post('/newPerson', {
    name: this.state.name,
    comment: this.state.comment
  })
  .then(response => {
    console.log(response);
  })
  .catch(error => {
console.log(error);
  });

}

  render(){

    return(
    <div className='mainApp'>
      <Form onInputChange={this.onInputChange}
            name = { this.state.name }
            comment = { this.state.comment }
      />
    </div>
    )
  }

}

export default App;

So it looks like my user input information is being taken, I just can’t figure out how to get it displayed on the user screen in NPM start

I think you should send back data here.

1 Like