如何将一些道具传递给 reactjs 中的其他组件？

Question

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>

Answer 1

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>