React js how to set and get parameter from another file? - node.js

Question

i'm new in react, and i would like to ask about how to send parameter to another function in class component. For example :
Main.js
import React, { Component } from "react";
import Form from "./Form";
import fetchData from "./Action";
export default class Main extends Component {
constructor(props) {
super(props);
this.fetchingData = this.fetchingData.bind(this);
this.state = {
list: 0
};
}
fetchingData(x) {
const data = fetchData(); // => from Action.js (get the return)
this.setState({ list: data });
}
componentDidMount(){
this.fetchingData();
}
render() {
return (
<>
<h3>Data</h3>
<Form />
<p>result: {this.state.list}</p> //=>show the result and auto update when click by button
</>
);
}
}
Form.js
import React from "react";
import fetchData from "./Action";
function Form() {
const handlerClick = (v) => {
fetchData(v); //=>set value form this function (from action.js)
};
return (
<>
<button onClick={(e) => handlerClick(1)}>Push</button>
</>
);
}
export default Form;
Action.js
const fetchData = (v) => {
return v;
};
export default fetchData;
From that code i would like to send parameter from button handlerClick() inside of that function, there is fetchData(), this function will keep the param and return it to the Main.js for fillup the setState. And the result will auto updated, when click the button Push.
Would u like to help me fixing my code ?

Answer 1

You have to send the function fetchingData as a prop to Form, something like: <Form fetchingData={fetchingData} /> from Main.js, that way you can call the function from <Form /> component and have your value saved.

Answer 2

Main.js
import React, { Component } from "react";
import Form from "./Form";
import fetchData from "./Action";
export default class App extends Component {
constructor(props) {
super(props);
this.fetchingData = this.fetchingData.bind(this);
this.state = {
list: 0
};
}
fetchingData(x) {
const data = fetchData(x); // => from Action.js (get the return)
this.setState({ list: data });
}
componentDidMount() {
this.fetchingData();
}
render() {
return (
<>
<h3>Data</h3>
<Form fData={this.fetchingData} />
<p>result: {this.state.list}</p>
</>
);
}
}
Form.js
import React from "react";
import fetchData from "./Action";
const Form = (props) => {
const handlerClick = (v) => {
if (props.fData) {
props.fData(v);
} else {
fetchData(v); //=>set value form this function (from action.js)
}
};
return (
<>
<button onClick={(e) => handlerClick(10)}>Push</button>
</>
);
};
export default Form;
Action.js
const fetchData = (v) => {
return v;
};
export default fetchData;
Live Demo