React: render user input in cards

Question

I have multiple user inputs in a form which I'm currently printing to the console. When the form is submitted, I want to render the input in separate cards on a new page.

What do I need to add/change in my code to get the user input displayed in cards or any html element instead of rendered to the console?

class Planning extends React.Component {
   constructor() {
     super()
     this.state = { 
       title: '',
       goal: '',
       tech: '',
       features: '',
       details: ''
    }

     this.handleChange = this.handleChange.bind(this)
     this.handleSubmit = this.handleSubmit.bind(this)
   }

handleChange(event) {

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

handleSubmit(event) {
    const {
      title,
      goal,
      tech,
      features,
      details
    } = this.state;
    event.preventDefault();
console.log(`Plan
Title: ${title},
Goal: ${goal},
Technologies: ${tech},
Features: ${features},
Details: ${details}`)
}
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
        <div>
          <label className="label-title">
            Project Title:</label>
            <input name="title" placeholder="Mental Health Guidance Website" id="title" type="text" onChange={this.handleChange}/>
            </div>
            <div>
          <label className="label-goal">
          Motivational Goal: </label>
          <input name="goal" placeholder="To get a job as a Fullstack Web Developer" id="goal" type="text" onChange={this.handleChange}/>
          </div>
          <div>
...
          <input class="submit" type="submit" value="Submit" />
        </form>
      )
    }
  }

Answer 1

You can use the centralized single state to manage your problem, You can consider using context if you want to pass the value too deep into the child components(if you have too many nested components), if you want to pass the values to direct child only, then you don't have to use context or any state management library, the plane react is enough to manage the situation,

for eg:

[Parent Component that keeps all values]
   - Child 1 - Form Page - get all values and save it in the parent component
   - Child 2 - Display Page - get values from the parent and display it here

Please refer React context if you think you need context you can use that.