How can I POST data from my form to a local JSON file?

Question

I am a bit of a newbie in React, but I would like to master it. Fetching data was initially challenging, but now I have to post the form data back to the JSON file, could you kindly help me with this one??

bit of info, I am getting data from data.json via App.js it has a basic structure ready like such:

    "payment": [
    {
          "nameId": 2,
          "amount": 10,
          "currency": "",
          "id": 1
    }]

Additionally can someone suggest a way that I can make the post conditional, which means, the user HAS to select a radio button, and then only the user can click pay?. Thank you in advance.

import React from 'react'
import './card-style.css'
import { useState } from 'react'
import ReactCardFlip from 'react-card-flip'
import { AiOutlineClose } from 'react-icons/ai'
import Axios from 'axios'

const CardUI = ({ charity }) => {
  return (
    <div className='section-center'>
      {charity.map((charityInfo) => {
        const { id, name, image } = charityInfo
        return <SingleCardUI id={id} name={name} image={image} />
      })}
    </div>
  )
}

function formSubmit() {
  return window.alert('Thank you')
}

function SingleCardUI(props) {
  const [isFlipped, setIsFlipped] = useState(false)
  const handleClick = () => {
    setIsFlipped(!isFlipped)
  }
  return (
    <article key={props.id} className='page-item'>
      <ReactCardFlip isFlipped={isFlipped} flipDirection='vertical'>
        <div className='card text-center shadow'>
          <div className='overflow location-front-item'>
            <img
              src={props.image}
              alt={props.name}
              className='card-img-top hova location-front-image'
            />
          </div>
          <div className='card-body text-dark'>
            <div className='titletxt'>
              <h4 className='card-title'>{props.name}</h4>
            </div>
            <div className='linkbtn'>
              <button
                className='btn btn-sm btn-outline-primary front-flip-button'
                id
                onClick={handleClick}
              >
                Donate
              </button>
            </div>
          </div>
        </div>
        {/* ... */}
        {/* BACK ITEM */}
        {/* ... */}

        <div className='card text-center shadow'>
          <div className='location-back-item'>
            <img
              src={props.image}
              alt={props.name}
              className='card-img-top location-back-image'
              style={{ opacity: 0.15 }}
            />
            <div className='card-img-overlay'>
              {/* ICON */}
              <div>
                <span
                  className='btn btn-sm back-flip-button close'
                  onClick={handleClick}
                >
                  <AiOutlineClose />
                </span>
              </div>
              <div className='container back-init'>
                <b>
                  <p>Select the amount to donate (USD)</p>
                </b>
                {/* 10 */}
                <div
                  className='form-check form-check-inline'
                  onSubmit={formSubmit}
                >
                  <input
                    className='form-check-input'
                    type='radio'
                    name='inlineRadioOptions'
                    id='inlineRadio1'
                    value='option1'
                  />
                  <label className='form-check-label' htmlFor='inlineRadio1'>
                    10
                  </label>
                  {/* 20 */}
                </div>
                <div className='form-check form-check-inline'>
                  <input
                    className='form-check-input'
                    type='radio'
                    name='inlineRadioOptions'
                    id='inlineRadio2'
                    value='option2'
                  />
                  <label className='form-check-label' htmlFor='inlineRadio2'>
                    20
                  </label>
                </div>
                {/* 50 */}
                <div className='form-check form-check-inline'>
                  <input
                    className='form-check-input'
                    type='radio'
                    name='inlineRadioOptions'
                    id='inlineRadio3'
                    value='option3'
                  />
                  <label className='form-check-label' htmlFor='inlineRadio3'>
                    50
                  </label>
                </div>
                {/* 100 */}
                <div className='form-check form-check-inline'>
                  <input
                    className='form-check-input'
                    type='radio'
                    name='inlineRadioOptions'
                    id='inlineRadio4'
                    value='option4'
                  />
                  <label className='form-check-label' htmlFor='inlineRadio4'>
                    100
                  </label>
                </div>
                {/* 200 */}
                <div className='form-check form-check-inline'>
                  <input
                    className='form-check-input'
                    type='radio'
                    name='inlineRadioOptions'
                    id='inlineRadio5'
                    value='option5'
                  />
                  <label className='form-check-label' htmlFor='inlineRadio5'>
                    200
                  </label>
                </div>
                {/* 500 */}
                <div className='form-check form-check-inline'>
                  <input
                    className='form-check-input'
                    type='radio'
                    name='inlineRadioOptions'
                    id='inlineRadio6'
                    value='option6'
                  />
                  <label className='form-check-label' htmlFor='inlineRadio6'>
                    500
                  </label>
                </div>
                <div className='container-fluid'>
                  <div className='pay'>
                    <button
                      className='btn btn-sm btn-outline-primary back-flip-button'
                      onClick={handleClick}
                      type='submit'
                    >
                      Pay
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className='card-body text-dark empty'></div>
        </div>
      </ReactCardFlip>
    </article>
  )
}

export default CardUI

Answer 1

You can not access the filesystem in React, because it runs on the browser. You will need to create a server-side API for those operations.