can someone tell me why am I getting this message in my console while I'm trying to send my data to my backend but the only thing that I get when I fill the title (for instance: Hello) is : : SyntheticBaseEvent {_reactName: 'onChange', _targetInst: null, type: 'change', nativeEvent: InputEvent, target: input#title.p-1.border-2.mx-2.rounded-sm, …}

I was expected to get :

 {title:"H", date:"", choice: ""}
...
 {title:"Hello", date:"", choice: ""}
... ( after chosing the date and the choice):
 {title:"Hello", date:"2022-05-27", choice: "Good"}...

Account:

export default function Account() {
  const [data, setData] = useState({
    title: "",
    date: "",
    choice: "", 
    trust:""
  });

  const COMMENT = [
    { label: "Good", value: "Good" },
    { label: "Medium", value: "Medium" },
    { label: "Bad", value: "Bad" }
  ];

  function onSubmit(e) {
    e.preventDefault();
    axios
      .post("", {
        title: data.title,
        date: data.date,
        choice: data.choice
        trust:data.trust
        comment:data.comment
      })
      .then((res) => {
        console.log(res.data);
      });
  }

  function handleSubmit(e) {
    const newData = { ...data };
    newData[e.target.id] = e.target.value;
    setData(newData);
    console.log(e);
  }
  function Checkbox({ value }) {
        const [checked, setChecked] = useState(value);
        return (
            <label>
                <input
                    type="checkbox"
                    checked={checked}
                    onChange={(e) => setChecked(checked => !checked)}
                    style={{
                        transform: "scale(1.2)",
                    }}
                />
                {value}
            </label>
        );
    }

  return (
    <>
      <form onSubmit={(e) => onSubmit(e)}>
        <label>
          Comment :
          <CustomDropdown
            options={COMMENT}
            isMulti={false}
            value={data.comment}
            onChange={(e) => handleSubmit(e)}
          />
        </label>
         Trust :  <Checkbox value={0} />    
          <label >
            Title:
            <input
              type="text"
              value={data.title}
              placeholder="Title"
              onChange={(e) => handleSubmit(e)}
              id="title"
            />
          </label>
          <label >
            Date:
            <div>
              <input
                type="date"
                value={data.date}
                onChange={(e) => handleSubmit(e)}
                id="date"
              />
            </div>
          </label>
        <button>Submit</button>
      </form>
    </>
  );
}

CustomDropdown:

import React, { useState } from "react";
import Select from "react-select";
import Tag from "./Tag";

export default function CustomDropdown({
  className,
  style,
  options,
  styleSelect,
  defaultValue,
  isMulti = false
}) {
  const [selected, setSelected] = useState(defaultValue);

  const styles = {
    select: {
      width: "100%",
      maxWidth: 200
    }
  };

  return (
    <div style={style} onClick={(e) => e.preventDefault()}>
      {selected && isMulti === false ? (
        <Tag
          selected={selected}
          setSelected={setSelected}
          styleSelect={styleSelect}
        />
      ) : (
        <Select
          className={className}
          style={styles.select}
          value={selected}
          onChange={setSelected}
          options={options}
          isMulti={isMulti}
        />
      )}
    </div>
  );
}

My goal is to be able when I click on 'Confirm' button (StepperControl.jsx) to send all the data to my api (and not each time i click on Next, but I'm aware that I will have to put an url, for now it will not work but that's fine, when i will give it one, it will work afterwards)

Here is my code

CodePudding user response：

The problem is that you console.log the actual change event. Change console.log(e); in handleSubmit method to console.log(newData) to see the new data. Also to avoid confusion, I suggest to change this method name (handleSubmit method), as it is not a submit event handler but a change event handler - the submit method that sends the data is onSubmit.

Another issue I noticed - choice dropdown is not controlled so data.choice will never change.

CodePudding user response：

The problem is that you're console.loging e. You need to console.log data or newData to get the output that you are looking for. e is the click event, so it shows all of the properties on the event (target, etc.), not the actual data.