I have multiple components already created that are on the same level which makes it hard for me to pass data between them. The HealthForm component has an input field which takes a host url and then fetches to APIs when a button is click. All of that works well. What I need is to pass that url to all the other components (ProductForm, xForm, yForm, zForm...) What I have now is that my backend server saves the url but that creates implications whee multiple browsers are using the webpage.
What I'm thinking that needs to be changed is to make the HealthForm the parent component of the other Forms. However, my App.js looks like this which has only the routes in it. A separate HeaderTabs links to the right routes...
EDIT The code now successfully saves and passes the url to its child components. The issue is that the page re-renders when i update the parent state in HealthForm.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
url: '',
};
this.setURL = this.setURL.bind(this);
}
setURL(page) {
this.setState({
url: page
});
console.log("Parent url: " + this.state.url);
}
render(){
return(
<MuiThemeProvider>
<Router>
<div className="App">
<Route path="/" component={()=>(
<div>
<Header/>
<HealthForm changeUrl={this.setURL} urlProp={this.state.url}/>)}>/>
</div>)}/>
<Route path="/path1" component={ProductForm}></Route>
<Route path="/path2" component={xForm}></Route>
<Route path="/path3" component={yForm}></Route>
<Route path="/path4" component={zForm}></Route>
</div>
</Router>
</MuiThemeProvider>
);
}
}
HealthForm
class HealthForm extends React.Component {
constructor(props) {
super(props);
this.state = {
exampleURL: '',
exampleURLError: '',
status: '',
showStatus: false
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
validate = () => {
//…checks for input errors
}
shouldComponentUpdate(nextProps, nextState) {
return nextProps !== nextState;
}
handleChange(event) {
this.setState({
[event.target.name]: event.target.value
});
}
handleSubmit(event) {
event.preventDefault();
const err = this.validate();
let that = this;
if (!err) {
this.setState({
exampleURLError: ''
});
console.log(this.state);
var data = this.state.exampleURL
fetch('http://somehost/health', {
method: 'POST',
body: JSON.stringify(data)
})
.then((res) => {
var promiseStatus = res.text();
promiseStatus.then(function (value) {
console.log("StatusHA: " + value);
that.setState({
status: value,
showStatus: true
});
if (that.shouldComponentUpdate(that.state.jarvisURL, that.props.urlProp))
that.props.changeUrl(that.state.jarvisURL);
});
}).catch((error) => {
console.log("Error: " + error);
});
}
}
render() {
return (
<form>
<TextField
...
/>
<br/>
<Button variant="contained" size="small" color="primary" onClick={e => this.handleSubmit(e)} >
Check
</Button>
<br /> <br />
...
</form>
);
}
}
export default HealthForm;
All other forms are pretty similar to HealthForm.
How can i reorganize my code to make HealthForm the parent component? Or is making a brand new parent component with all the forms being its children a better option? If so, any suggestions?
EDIT
I made the changes Snaz suggested which sucessfully sends the url to App's state but now
this.props.changeUrl(url);
causes the whole app to refresh?