Setting multiple inputs to state

Question

I have an calendar app that reads events in the following format

{
  title: "Werk",
  start: moment().toDate(),
  end: moment(),

  allDay: false,
}, 

And I have inputs so that the user can make their own events.

<form>
  <div className="text-center col-sm-12">
    <input placeholder="start date" required></input>
    <input placeholder="end date" required></input>
    <input placeholder="Title" onChange={this.myChangeHandler} required></input>{" "}
    <br /> <button className="text-center">Add event</button>
  </div>
</form>

My problem is, I have set state to be user input before, but not in this format. The state needs to be an object that has 4 properties. title, Start, End, and allday and each of these need to come from from the inputs
Overall I am a bit stumped on how to do this. Any help would be appreciated.
My full code is here I hope I was clear enough, please ask if I was not.

Answer 1

First, you need to use useState of React.

const [state, setState] = React.useState({
  title: "Werk",
  start: moment().toDate(),
  end: moment(),
  allDay: false,
});

And then set values and handlers for every input like below:

<input placeholder="start date"
  value={state.start}
  onChange={e => setState({...state, start: e.target.value})}
  required></input>

Answer 2

You can use state value for every input's value.

Hope this could be helpful.

import React, { Component } from 'react';
import { Calendar, momentLocalizer } from 'react-big-calendar';
import moment from 'moment';

import './App.css';
import 'react-big-calendar/lib/css/react-big-calendar.css';

const localizer = momentLocalizer(moment);

class App extends Component {
  state = {
    events: [
      {
        title: 'Werk',
        start: moment().toDate(),
        end: moment(),
        allDay: false
      }
    ],
    title: '',
    start: '',
    end: ''
  };

  myChangeHandler = (key) => (event) => {
    this.setState({ [key]: event.target.value });
  };

  onAddEvent = (event) => {
    event.preventDefault();
    const { title, start, end, events } = this.state;
    this.setState({
      events: [
        ...events,
        {
          title,
          start: moment(new Date(start)),
          end: moment(new Date(end)),
          allDay: false
        }
      ]
    });
  };

  render() {
    return (
      <div className="App">
        <form onSubmit={this.onAddEvent}>
          <div className="text-center col-sm-12">
            <input
              placeholder="start date"
              required
              onChange={this.myChangeHandler('start')}
            ></input>
            <input
              placeholder="end date"
              required
              onChange={this.myChangeHandler('end')}
            ></input>
            <input
              placeholder="Title"
              onChange={this.myChangeHandler('title')}
              required
            ></input>{' '}
            <br />{' '}
            <button type="submit" className="text-center">
              Add event
            </button>
          </div>
        </form>
        <Calendar
          localizer={localizer}
          defaultDate={new Date()}
          defaultView="month"
          events={this.state.events}
          style={{ height: '100vh' }}
        />
        <div className="list">
          <ul>
            <li>Display Weekly view X</li>
            <li>Highlight today X</li>
            <li>Allow navigation to different weeks X</li>
            <li>allow adding new events</li>
            <li>allow editing existing events</li>
            <li>allow deleting events</li>
            <li>Persisting data </li>
            <li>Use apis to load and save data </li>
          </ul>
        </div>
      </div>
    );
  }
}

export default App;