Return an event just as any input.

I am making a form, with multiple fields, all my fields send a prop to the parent component, just like this: ChildComponent

function NameInput (props) {  
  return (
    <React.Fragment>
      <label htmlFor="username">Nombre de Usuario</label>
      <input
        className="form-control"
        id="username"
        name="username"
        type="text"
        placeholder="Enter username"
        value={props.data}
        onChange={props.handleChange}
        />    
    </React.Fragment>
  )
};

The on change method, in the parent element, call action and add the new property to my state, with redux, and all the crazy things…

ParentComponent

handleChange = event => {
  const {name, value} = event.target
  this.props.addField({...this.props.user, [name] : value})
}

It works fine with any type of field, like names, email, etc etc… But this workflow doesn’t work with react-DatePicker, this is my current approach:

function birthInput(props) {  
  return (
  <React.Fragment>
    <label htmlFor="username">Año de nacimiento</label>
    <DatePicker 
      name="nacimiento" 
      selected={props.data} 
      onChange={props.handleChange} />
  </React.Fragment>
  )
};

But, checking out what I get in my on change method, and found a simple date: Wed Mar 20 2019 16:00:39 GMT+0100 (hora estándar de Europa central)

Expected behaviour

Return the event from the input field.

Actual behavior

a dateObject

Steps to reproduce

Follow the example.

[lodab111]

I came across this issue of not being able to get the data i needed from the event of the input. I am creating each input dynamically and I am reading the name of the event.target to decide where to update my state. I found that I was able to hack it a bit and just create an object to mock the data I needed from the event.target object.

DatePicker = (fieldData) => {
return (
  <DatePicker 
  selected={fieldData.Value}  
  isClearable
  className="DatePickerTextArea"
  onChange={(value, event) => {
	event.target = {type:"text", value:value, name:fieldData.Name}
	fieldData.ChangeHandler(event)
  }}
   />
);
}

[linkerx]

@josuevalrob las one is a good solution if you only have one date, i want to dynamically add from several datepickers, and its imposible without event target. Solution: one handler for every datepicker