title: How to send information to the backend in React.js?
body: <p>I am very new to backend programming and I am quite confused when trying to figure out how to send data onClick to be stored in the backend. Right now the backend is a super simple flask server but my partner may be changing it to mySQL.
  my application is a very simple react flashcard app that takes 10 questions from a trivia API and displays all 10 of them at once to the screen, each card with the question and answers choices, and the user can click on an answer choice to make a guess and if the guess is right, the card does a simple flip animation that shows the correct answer on the back. Now I am trying to send the data from the user's guess to the backend, so I would like to send the whole card, including the question, the incorrect answers, the correct answer, the answer that was guessed by the user, and whether it was right or wrong. here is an overview of every component in the project just so you can understand how it works:</p>
  <p>my app.js file maps over the dictionary objects from my api and turns them into props. Here is the code in that file:</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;
  import FlashcardList from &quot;./FlashcardList&quot;
  import './app.css'
  import axios from 'axios' // makes importing from api easy
  
  export default function App() {
  const [flashcards, setFlashcards] = useState([])
  
  useEffect(() =&gt; {
  axios.get('http://127.0.0.1:5000/')
  .then(res =&gt; {
      setFlashcards(res.data.results.map((questionItem, index) =&gt; { // mapping over api 
  to get objects &quot;questionItem&quot; and the index of each one
          const answer = decodeString(questionItem.correct_answer) // setting the correct_answer objects from api to answer
          const options = [
              ...questionItem.incorrect_answers.map(a =&gt; decodeString(a)), answer // spreading incorrect_answers objects into an array with answer at the back to set all of them into options
          ]
          return {
              id: `&amp;{index}-${Date.now()}`, // sets the id to the index from the api and the exact time to make sure its always unique
              question: decodeString(questionItem.question), // setting question objects from api to question
              answer: answer, // already defined above
              options: options.sort(() =&gt; Math.random() - .5) // sorting all the options randomly
          }
      }))
  })
  }, [])
  
  function decodeString(str) {
  const textArea = document.createElement('textarea')
  textArea.innerHTML= str
  return textArea.value // function brings all of our objects into this new element and decodes all of the encoded html
  }
  return (
  &lt;div className=&quot;container&quot;&gt;
      &lt;FlashcardList flashcards={flashcards} /&gt;
  &lt;/div&gt;
  )
  }
  </code></pre>
  <p>my flashcard.js file recieves the props from the app.js file and builds the front and back of the card, creates a useState to make the card flip, and a useState to calculate the height for each card. this is the code on the flashcard.js file:</p>
  <pre><code>import React, { useState, useEffect, useRef } from 'react'
  
  export default function Flashcard({ flashcard }) {     // recieving flashcard prop 
  from our mapping in flashcardlist.js, each w a unique id
  
  const MAX_TRIES = 4
  const [incorrect, setIncorrect] = useState(false)
  const [guess, setGuess] = useState(0)
  const [flip, setFlip] = useState(false)
  const [height, setHeight] = useState('initial') //sets the state for our initial 
  height to be replaced by the max height
  
  const frontEl = useRef() // lets us have a reference from the front and back through 
  every rerendering of them
  const backEl = useRef()
  
  const handleUserPicksAnswer = (answer) =&gt; {
      if (answer === flashcard.answer) {
          setFlip(true)
          return &quot;correct&quot;
      }
      if (guess + 1 === MAX_TRIES) {
          setFlip(true)
      }
  
      setGuess(guess + 1)
      setIncorrect(true)
  }
  
  function setMaxHeight() {
  const frontHeight = frontEl.current.getBoundingClientRect().height //gives us 
  dimensions of the rectangle but we only need the height
  const backHeight = backEl.current.getBoundingClientRect().height
  setHeight(Math.max(frontHeight, backHeight, 100)) // sets the height (setHeight) to 
  the maximum height of front or back but the minimum is 100px
  }
  
  useEffect(setMaxHeight, [flashcard.question, flashcard.answer, flashcard.options]) //anytime any of these change then the setMaxHeight will change
  useEffect(() =&gt; {
  window.addEventListener('resize', setMaxHeight) //everytime we resize our browser, it 
  sets the max height again
  return () =&gt; window.removeEventListener('resize', setMaxHeight) //removes the 
  eventlistener when component destroys itself
    }, [])
  
  
  return (
  &lt;div 
  className={`card ${flip ? 'flip' : ''}`} // if flip is true classname will be card 
  and flip, if flip isnt true it will just be card
  style={{ height: height }} //setting height to the variable height
  
      onClick={() =&gt; setFlip(!flip)} // click changes it from flip to non flip
  &gt;
  &lt;div className='front' ref={frontEl}&gt;
      {flashcard.question}
      &lt;div className='flashcard-options'&gt;
          {flashcard.options.map(option =&gt; {
              return &lt;div onClick={() =&gt; handleUserPicksAnswer(option)} 
  className='flashcard-option'&gt;{option}&lt;/div&gt;
          })}
      &lt;/div&gt;
  &lt;/div&gt; 
  &lt;div className='back' ref={backEl}&gt;{flashcard.answer}&lt;/div&gt;
  &lt;/div&gt;
   )
  }
  // setting the front to show the question and the answers by looping through the 
   options to make them each an option with a class name to style
  // back shows the answer
  </code></pre>
  <p>my flashcardList.js file takes in the flashcards props from app.js and gives them each a unique id before passing it to flashcard.js to format the cards. here is that code:</p>
  <pre><code>import React from 'react'
  import Flashcard from './Flashcard'
  
  export default function FLashcardList({ flashcards }) {
  // taking in the flashcards as destructured props so we dont have to make a props. 
  variable
  return (
  
  // card-grid is a container so we can put all the cards in a grid to ensure they 
  change in size proportionally to the size of the window //
  &lt;div className='card-grid'&gt; 
  
  {flashcards.map(flashcard =&gt; { // loops through the flashcards api and maps each one 
  to flashcard
  
    return &lt;Flashcard flashcard={flashcard} key={flashcard.id} /&gt; // each flashcard is 
  then passed down to the &quot;Flashcard.js&quot; component we created returned w a unique id
   })}
  &lt;/div&gt;
  )
  }
  </code></pre>
  <p>and then i have a app.css file that handles the complications of making the flip animation:</p>
  <pre><code>body {
  background-color: #c8d0d2;
  margin: 0;
  }
  
  .container {
  max-width: 900px;
  margin: 1rem 2rem;
  }
  
  .card-grid {
  display: grid;
  align-items: center;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* sets the cards to 
  dynamically fit the page no matter how big it gets and to 200px minimum each card*/
  gap: 1rem;
  }
  
  .card {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: .25rem;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, .3);
  background-color: white;
  transform-style: preserve-3d; /* to preserve our 3d elements so the card actually 
  flips to the back instead of just rotating the front 180 deg */
  /* height: 150px; /* this will be changed eventually so the height is automatically 
  set by the size of the content text */
  transition: 150ms; /* so we can see the flip animation by slowing it down */ 
  cursor: pointer;
  transform:perspective(1000px) /* to make the flip seem a little more 3d, less flat 
  */rotateY(var(--rotate-y, 0)) /* card will flip  to whatever we set the rotate-y 
  variable in .card.flip */
  translateY(var(--translate-y, 0));
  
  }
  
  .card:hover {
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, .6); /* makes the outline darker when hover */
  --translate-y: -2px; /* moves the card up when hover */
  
  }
  
  .card.flip {
  --rotate-y: 180deg;
  }
  
  .card .front {
  left: 0;
  }
  
  .card .front,
  .card .back {
  position: absolute; /* so the front and back dont offset eachother */
  padding: 1rem;
  backface-visibility: hidden; /* makes it so anything facing backwards is hidden so 
  the back of the card isnt showing on the front and the front isn't showing when the 
  card is flipped to the back */ 
  }
  
  .card .back {
  transform: rotateY(180deg); /* needs to be rotated because it's on the back so it 
  will be flipped to the front and made right side up when flipped */
  }
  
  .flashcard-options {
  margin-top: .5rem;
  
  }
  
  .flashcard-option {
  margin-top: .25rem;
  color: #555;
  font-size: .75rem;
  }
  
  .flashcard-option:first-child {
  margin-top: 0;
  }
  </code></pre>
  <p>and then here is my super simple backend that just has the data for the 10 flashcards hard coded in there for now:</p>
  <pre><code>from flask import Flask, jsonify, make_response
  import json
  
  app = Flask(__name__)
  @app.route(&quot;/&quot;)
  def index():
  resp = jsonify({&quot;response_code&quot;:0,&quot;results&quot;:[{&quot;category&quot;:&quot;Entertainment: 
  Music&quot;,&quot;type&quot;:&quot;multiple&quot;,&quot;difficulty&quot;:&quot;medium&quot;,&quot;question&quot;:&quot;Who is the founder and 
  leader of industrial rock band, &amp;#039;Nine Inch Nails&amp;#039;?&quot;,&quot;correct_answer&quot;:&quot;Trent 
  Reznor&quot;,&quot;incorrect_answers&quot;:[&quot;Marilyn Manson&quot;,&quot;Robin Finck&quot;,&quot;Josh Homme&quot;]}, 
  {&quot;category&quot;:&quot;Entertainment: 
  Books&quot;,&quot;type&quot;:&quot;multiple&quot;,&quot;difficulty&quot;:&quot;hard&quot;,&quot;question&quot;:&quot;What is Ron Weasley&amp;#039;s 
  middle name?&quot;,&quot;correct_answer&quot;:&quot;Bilius&quot;,&quot;incorrect_answers&quot;: 
  [&quot;Arthur&quot;,&quot;John&quot;,&quot;Dominic&quot;]}, 
  {&quot;category&quot;:&quot;Geography&quot;,&quot;type&quot;:&quot;multiple&quot;,&quot;difficulty&quot;:&quot;medium&quot;,&quot;question&quot;:&quot;Which of 
  these is NOT an island that is part of the 
  Philippines?&quot;,&quot;correct_answer&quot;:&quot;Java&quot;,&quot;incorrect_answers&quot;: 
  [&quot;Luzon&quot;,&quot;Mindanao&quot;,&quot;Palawan&quot;]},{&quot;category&quot;:&quot;Entertainment: Video 
  Games&quot;,&quot;type&quot;:&quot;boolean&quot;,&quot;difficulty&quot;:&quot;easy&quot;,&quot;question&quot;:&quot;The 2005 video game 
  &amp;quot;Call of Duty 2: Big Red One&amp;quot; is not available on 
  PC.&quot;,&quot;correct_answer&quot;:&quot;True&quot;,&quot;incorrect_answers&quot;:[&quot;False&quot;]}, 
  {&quot;category&quot;:&quot;Vehicles&quot;,&quot;type&quot;:&quot;boolean&quot;,&quot;difficulty&quot;:&quot;easy&quot;,&quot;question&quot;:&quot;The full 
  English name of the car manufacturer BMW is Bavarian Motor 
  Works&quot;,&quot;correct_answer&quot;:&quot;True&quot;,&quot;incorrect_answers&quot;:[&quot;False&quot;]}, 
  {&quot;category&quot;:&quot;History&quot;,&quot;type&quot;:&quot;multiple&quot;,&quot;difficulty&quot;:&quot;medium&quot;,&quot;question&quot;:&quot;What year 
  is considered to be the year that the British Empire 
  ended?&quot;,&quot;correct_answer&quot;:&quot;1997&quot;,&quot;incorrect_answers&quot;:[&quot;1986&quot;,&quot;1981&quot;,&quot;1971&quot;]}, 
  {&quot;category&quot;:&quot;Entertainment: Video 
  Games&quot;,&quot;type&quot;:&quot;multiple&quot;,&quot;difficulty&quot;:&quot;medium&quot;,&quot;question&quot;:&quot;What element does the 
  Zinogre use in Monster Hunter?&quot;,&quot;correct_answer&quot;:&quot;Thunder&quot;,&quot;incorrect_answers&quot;: 
  [&quot;Ice&quot;,&quot;Fire&quot;,&quot;Water&quot;]},{&quot;category&quot;:&quot;Entertainment: Video 
  Games&quot;,&quot;type&quot;:&quot;multiple&quot;,&quot;difficulty&quot;:&quot;easy&quot;,&quot;question&quot;:&quot;When was Left 4 Dead 2 
  released?&quot;,&quot;correct_answer&quot;:&quot;November 17, 2009&quot;,&quot;incorrect_answers&quot;:[&quot;May 3, 
  2008&quot;,&quot;November 30, 2009&quot;,&quot;June 30, 2010&quot;]},{&quot;category&quot;:&quot;Entertainment: 
  Film&quot;,&quot;type&quot;:&quot;multiple&quot;,&quot;difficulty&quot;:&quot;medium&quot;,&quot;question&quot;:&quot;What is the make and model 
  of the tour vehicles in &amp;quot;Jurassic Park&amp;quot; (1993)?&quot;,&quot;correct_answer&quot;:&quot;1992 
  Ford Explorer XLT&quot;,&quot;incorrect_answers&quot;:[&quot;1992 Toyota Land Cruiser&quot;,&quot;1992 Jeep 
  Wrangler YJ Sahar&quot;,&quot;Mercedes M-Class&quot;]},{&quot;category&quot;:&quot;Entertainment: Japanese Anime &amp; 
  Manga&quot;,&quot;type&quot;:&quot;multiple&quot;,&quot;difficulty&quot;:&quot;easy&quot;,&quot;question&quot;:&quot;What is the theme song of 
  &amp;quot;Neon Genesis Evangelion&amp;quot;?&quot;,&quot;correct_answer&quot;:&quot;A Cruel Angel&amp;#039;s 
  Thesis&quot;,&quot;incorrect_answers&quot;:[&quot;Stardust Crusaders&quot;,&quot;Requiem for a Dream&quot;,&quot;God 
  Knows&quot;]}]})
  resp.status_code = 200
  resp.headers['Access-Control-Allow-Origin'] = '*'
  resp.headers['Access-Control-Allow-Credentials'] = 'true'
  resp.headers['Access-Control-Allow-Methods'] = 'GET, POST, OPTIONS'
  resp.headers['Access-Control-Allow-Headers'] = 'Origin, Content-Type, Accept'
  return resp
  
  if __name__ == &quot;__main__&quot;:
  app.run(debug=True)
  </code></pre>
  <p>I'm a beginner and i appreciate any help. Thank you!</p>