POST Value of Button through Axios in ReactJS

Question

Hope you're all good.

I'm trying to find out how to POST the value I'm getting from my Button component through axios to a local API.

Here is what I'm trying to achieve:

I'm trying to send in the value of the button which in this case is the 'day' and set 'status' to open in this API.

Here is how I'm fetching my data through axios:

Code in text format:

 // Intitiate useState for opening Chocolate Day Box
  const [chocolateBox, setOpenChocolateBox] = useState('');

  // Call on post method via axios
  const onSubmit = async (event) => {
    event.preventDefault();

    // Url where to post
    await axios.post(`http://localhost:5001/open/chocolate`, {
      // Sending in chocolateBox as value
      chocolateBox,
    });

    setOpenChocolateBox();
  };

And here is the Button component in which I'm trying to send in the value through:

Code in text:

<Grid item key={day.day}>
            <Button
              disabled={date <= day.day}
              // onSubmit function called here in Button
              onSubmit={onSubmit}
              // value to be sent to chocolateBox
              value={chocolateBox}
              key={day.day}
              sx={{
                color: 'white',
                width: 150,
                height: 150,
                backgroundColor: 'primary.dark',
                '&:hover': {
                  backgroundColor: 'primary.main',
                  opacity: [0.9, 0.8, 0.7],
                },
              }}
            >
              {/* I want this value here of day.day to be sent through Post via axios */}
              {day.day}
            </Button>
          </Grid>

And here is the code in the Web API:

All I want to send in is the value of the current button like this:

{ "day": 1}

Here is how my application looks like:

So let's say for example that I click on the calendar day '2' like on the image, I want that value to be posted through axios in ReactJS. I can't seem to get it to work

Thanks for any help in advance, take of yourselves!

Answer 1

I don't know if this is the issue that you are facing. You can post the data by changing the code like below.

 // Intitiate useState for opening Chocolate Day Box const [chocolateBox, setOpenChocolateBox] = useState(''); // Call on post method via axios const onSubmit = async (event) => { event.preventDefault(); // Url where to post await axios.post(`http://localhost:5001/open/chocolate`, { // Sending in chocolateBox as value {"day": chocolateBox}, }); setOpenChocolateBox(); };

Answer 2

To resolve this issue I did this:

  // Intitiate useState for opening Chocolate Day Box
  const [chocolateBox, setOpenChocolateBox] = useState('');

  // Call on post method via axios
  const openChocolate = async (event) => {
    event.preventDefault();

    // Url where to post
    await axios.post(`http://localhost:5001/open/chocolate`, {
      // Sending in event.target.value instead of chocolateBox
      day: event.target.value,
    });

    setOpenChocolateBox('');
  };

Then in button I did this:

<Grid item key={day.day}>
            <Button
              disabled={date <= day.day}
              // I changed onSubmit to onClick since the component is not a form but a Button. I also changed value to day.day since I want to extract the value of day.day and not chocolateBox
              value={day.day}
              onClick={openChocolate}
              // value to be sent to chocolateBox
              key={day.day}
              sx={{
                color: 'white',
                width: 150,
                height: 150,
                backgroundColor: 'primary.dark',
                '&:hover': {
                  backgroundColor: 'primary.main',
                  opacity: [0.9, 0.8, 0.7],
                },
              }}
            >
              {/* I want this value here of day.day to be sent through Post via axios */}
              {day.day}
            </Button>
          </Grid>