title: React Axios: How to send just the state value of my prop to backend
body: <p>So, I've passed my parent state to my child component as a prop called title. I want to make a put request with axios using the value of that prop. If I render it in a div it returns the state value but when I put it into the axios parameters, it doesn't. Instead, in my console log, it shows a prop object:</p>
  
  <pre><code>{$$typeof: Symbol(react.element), key: null, ref: null, props: {…}, type: ƒ, …}
  $$typeof: Symbol(react.element)
  type: class Title
  key: null
  ref: null
  props: {title: "Godfather"}
  _owner: null
  _store: {validated: false}
  _self: componentData {props: {…}, context: {…}, refs: {…}, updater: {…}, state: {…}, …}
  _source: {fileName: "C:\Users\Craig\Desktop\project - Copy\client\src\components\Movies\SendingMovie.js", lineNumber: 20}
  __proto__: Object
  </code></pre>
  
  <p>Basically, I just want to send <code>'Godfather'</code>. Not an entire object thing like above. 
  Also when I create a dummy state for this child component and give it <code>movie: 'Godfather'</code> and then
  pass it into the axios put request, the database registers and it works. So my back-end code is fine but
  I'm not sure why props isn't giving me just the state value.</p>
  
  <p>Shortened Code Snippet:</p>
  
  <p>Parent (component called Foods):</p>
  
  <pre><code>class Votes extends Component {
    constructor(props, context) {
      super(props, context);
     this.state = {
     error: null,
     isLoaded: false,
     foods: [],
     activefood:'', //new added
  };
  
  ...
  
  render() {
       const title = this.state.activefood
       return(
       &lt;p&gt;
        title={title}
       &lt;/p&gt;
  )
  }
  </code></pre>
  
  <p>Child:</p>
  
  <pre><code>import React, {
      Fragment,
      useState,
      useEffect,
      Component
  } from "react";
  import axios from "axios";
  import Votes from './Foods';
  import Title from './Title';
  
  
  export default class SendingFood extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          error: null,
          clicked: false
      }
      this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
      this.setState({
          clicked: true,
      });
  }
  
  
     patchFunction() {
       this.setState({isLoading: true});
      axios.patch('api/food/modify', {foodname: &lt;Title title={this.props.title}/&gt;})
          .then(res =&gt; {
            console.log(res);
              this.setState({
                   isLoading: false,
              })
             console.log('sent');
        },
                (error) =&gt; {
            this.setState({
              isLoaded: true,
              error
  
            });
  
          }
        )
      };
  
  
     combinedFunction() {
      this.patchFunction();
      this.handleClick();
  }
  
   render(){
     const {isLoading, error} = this.state;
      if (error) {
        return &lt;div style={{color: "red"}}&gt;Error: {error.message}&lt;/div&gt;;
      };
   return (
      &lt;Fragment&gt;
        &lt;Title title={this.props.title}/&gt;
     &lt;button className="primary" onClick={() =&gt; {  this.patchFunction() }}&gt;Submit Vote&lt;/button&gt;
  
       &lt;/Fragment&gt;
            )}
    }
  </code></pre>
  
  <hr>
  
  <pre><code>import React, {
      Fragment,
      useState,
      useEffect,
      Component
  } from "react";
  
      export default class Title extends React.Component{
          render() {
              return (
                  &lt;Fragment&gt;
                  {this.props.title}
                  &lt;/Fragment&gt;
              );
          }
      }
  </code></pre>
  
  <p>Up until this point, I've been using react to render props and pass data and state to other components but I'm stuck now where I want a child component to receive state data and send it to the back end. Maybe i'm using the wrong procedure or wrong tools for the job?</p>