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:
{$$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
Basically, I just want to send 'Godfather'. Not an entire object thing like above.
Also when I create a dummy state for this child component and give it movie: 'Godfather' 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.
Shortened Code Snippet:
Parent (component called Foods):
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(
<p>
title={title}
</p>
)
}
Child:
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: <Title title={this.props.title}/>})
.then(res => {
console.log(res);
this.setState({
isLoading: false,
})
console.log('sent');
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
};
combinedFunction() {
this.patchFunction();
this.handleClick();
}
render(){
const {isLoading, error} = this.state;
if (error) {
return <div style={{color: "red"}}>Error: {error.message}</div>;
};
return (
<Fragment>
<Title title={this.props.title}/>
<button className="primary" onClick={() => { this.patchFunction() }}>Submit Vote</button>
</Fragment>
)}
}
import React, {
Fragment,
useState,
useEffect,
Component
} from "react";
export default class Title extends React.Component{
render() {
return (
<Fragment>
{this.props.title}
</Fragment>
);
}
}
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?
