This is supposed to take in some user info and I want to pass through some of my states that have been updated by user input to a table in another component, however, the ways I have seen online do not seem to be working and they are just showing up blank in the table instead of the input value.
class StartPage extends Component {
constructor(props) {
super(props);
this.state = {
setBots: '',
setEmployees: '',
setSalary: '',
setTime: '',
};
this.handleChange = this.handleChange.bind(this);
this.onCalculateSubmit =
this.onCalculateSubmit.bind(this);
};
handleChange(event) {
this.setState({
[event.target.name]: event.target.value
});
};
onCalculateSubmit(event) {
alert(this.state.setSalary);
this.setState({calcClicked: true});
}
render(){
return (
<div className="container">
<div className="header-container">
<h2> </h2>
<h1>Return on Investment Calculator</h1>
<h2> </h2>
</div>
<form onSubmit={this.onCalculateSubmit}>
<div class="inputs input-group">
{/* <InputCard onChange={this.handleBots} value=
{this.state.value} id="Bots" icon="robot"
label="Number of Processes" />
<InputCard onChange={this.handleEmployees} value=
{this.state.setEmployees} type="text" id="Employees"
icon="users"
label="Number of FTE's" />
<InputCard onChange={this.handleSalary} id="Salary"
icon="dollar-sign" label="Average Salary" />
<InputCard onChange={this.handleTime} id="Time"
icon="clock" label="Average Time (%)" /> */}
<label>
Number of Processes:
<input type="text" onChange={this.handleChange}
name="setBots" /> {/*value={this.state.value}*/}
</label>
</div>
<div class="inputs input-group">
<label>
Number of FTEs:
<input type="text" onChange={this.handleChange}
name="setEmployees" />
</label>
</div>
<div class="inputs input-group">
<label>
Average Salary for FTEs:
<input type="text" onChange={this.handleChange}
name="setSalary" />
</label>
</div>
<div class="inputs input-group">
<label>
Percent of Time Spent on Task:
<input type="text" onChange={this.handleChange}
name="setTime" />
</label>
</div>
<Router>
<div>
<h1> </h1>
<Link to='/ResultsPage' >
<button type="submit" onClick=
{this.onCalculateSubmit}
class="btn btn-outline-success submit-button btn-
lg">CALCULATE</button>
</Link>
</div>
<Switch>
<Route path="/ResultsPage" exact>
<ResultsPage data={this.state.setSalary} />
</Route>
</Switch>
</Router>
{/*<input type="submit" value="Submit"/>*/}
</form>
This is the other component which, is supposed to use the props in the table. As of right now it outputs blank:
const ResultsPage = (data) => {
return (
<>
<Header />
<Table table-hover className="resultsTable">
<thead>
<tr>
<th> </th>
<th>Year 1</th>
<th>Year 2</th>
<th>Year 3</th>
<th>Year 4</th>
<th>Year 5</th>
</tr>
</thead>
<tbody>
<tr>
<b><td>Salary of Employee(s) Spent on Task</td></b>
<td>{data.setSalary}</td>
<td>{data.setSalary}</td>
<td>{data.setSalary}</td>
<td>{data.setSalary}</td>
<td>{data.setSalary}</td>
</tr>
There are possibly 2 issue I see.
The first one is with your form. I think you need to reformat your parent component too. I don't recommend having a form around your entire router as that means every route you have would be a part of a form which could cause issues. But this issue is that you arent prevent the default action of your form which is a GET request.
onCalculateSubmit(event) {
event.preventDefault();
alert(this.state.setSalary);
this.setState({calcClicked: true});
}
But main one is with your in your ResultsPage Component. When you pass props into a component they are all saved together as an object. So you either need to deconstruct it into the data variable const { data } = props
or just call if from the object props.data.setSalary
const ResultsPage = (props) => {
const { data } = props;
// or you could say props.data.setSalary
return (
<>
<Header />
<Table table-hover className="resultsTable">
<thead>
<tr>
<th> </th>
<th>Year 1</th>
<th>Year 2</th>
<th>Year 3</th>
<th>Year 4</th>
<th>Year 5</th>
</tr>
</thead>
<tbody>
<tr>
<b><td>Salary of Employee(s) Spent on Task</td></b>
<td>{data.setSalary}</td>
<td>{data.setSalary}</td>
<td>{data.setSalary}</td>
<td>{data.setSalary}</td>
<td>{data.setSalary}</td>
</tr>
</tbody>
</Table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.