How to store, submit and copy input from form to another component in ReactJS

Question

I state that I do not have much experience, I am a statistician. I am creating a small App and I would like to copy the data entered in a form in the main dashboard of the site. Dashboard and form are two separate components. I can only copy the form data within itself but I cannot export the data to the dashboard.

What I want to achieve is that the logged in user can post a personal ad in the public dashboard and that it remains saved and visible to all users.

    constructor(props){
    
super(props)
    
this.state = {
      
Name: '',
      
Country: '',
     
 Business: '',
     
 Size: '',
     
 Wishlist: '',
     
Detail: '',
submittedData: []  } }

  handleName = event => {
   this.setState({
      Name: event.target.value
    })
  }
  
handleCountry = event => {
    this.setState({
      Country: event.target.value
    })
  }

  handleBusiness = event => {
    this.setState({
      Business: event.target.value
    })
  }
  
handleWishlist = event => {
    this.setState({
      Wishlist: event.target.value
    })
  }
 
 handleDetail = event => {
    this.setState({
      Detail: event.target.value
    })
  }

  
handleSubmit = event => {
    event.preventDefault()
    
let formData = { Name:this.state.Name, Country: this.state.Country, Business: this.state.Business,  Whishlist: this.state.Whishlist, Detail: this.state.Detail}
    
let dataArray = this.state.submittedData.concat(formData)
    
this.setState({submittedData: dataArray})
  }

The data collected in this way is a copy only on the form page, it does not save it and I cannot export it anywhere else.

In the form i use:

<Form onSubmit={event => this.handleSubmit(event)} >
    
onChange={event => this.handleName(event)}
                  value={this.state.Name} >
<Button>
     <input type="submit" value="Submit" onClick={this.submitForm}/>
</Button>

To be clearer: I want a mechanism similar to facebook, where the user writes a post on the home and that is copied and saved on his personal profile. Instead of the facebook home textarea I have the form to fill out.

If it is too long to explain I don't ask for the detailed description, a guide would be enough to solve this problem. I don't know where to look anymore.

P.S. I know it's improper to write "pages" since mine is a one-page app.

Answer 1

I really dont get your question, but you can move data through pages Using LocalStorage

So, on your form you can save the form details as

localStorage.setitem('data',JSON.stringify(dataArray))

And then get it on another page using

    let data = JSON.parse(localStorage.getitem('data'))