Hello I am new to react and having difficulty passing the value to another component. So what I was trying to do is basically I am taking in an input from component called searchBar.js and trying to pass the value to another component called PriceModel.js. Once the PriceModel.js receives the value it passes the value to another component called StockData.js the data gets evaluated and passes back to PriceModel.js file to be printed in table format.

searchBar.js

    class SearchBar extends Component{
    
        constructor(props){
            super(props);
        
            this.state = {
              inputTicker:''
            }
            this.handleChange = this.handleChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
    
        }
    
        handleSubmit (event) {
            event.preventDefault();
            // this.props.handleData(this.state)
            
            // const data = this.props.handelData(this.state);
            // console.log("Current value?", data);
            console.log("Current value?", this.state.inputTicker);
        }
    
        handleChange(event) {
            // event.preventDefault();
            console.log("Taking in value:",event.target.value);
            this.setState({
                inputTicker: event.target.value
            });
            this.props.handleSubmit(this.state);
        }

    render() {
        return(
            <>
            <form onSubmit={this.handleSubmit} >
            {/* <form handleSubmit={this.handleFormSubmit.bind(this)} > */}
                <div className="search-container">
                    <span className="search-icon-btn" >
                        <button className="search-icon-btn" 
                                value="Submit" 
                                type="submit" 
                        >
                            <i className="fa fa-search" ></i>
                        </button>
                    </span>
                    <div className="search-input">
                        <input 
                            type="search" 
                            className="search-bar" 
                            placeholder="Search ticker symbol..."
                            value={this.state.inputValue}
                            onChange= {this.handleChange}
                        />

                    </div>
                </div>
            </form>
            </>

        )
    }
}

export default SearchBar;

PriceModel.js

import React, { Component} from 'react';
import StockData from './stockData'
import './PriceModel.css';
import SearchBar from '../navigation-Bar/searchBar';
    
class PriceModel extends Component{
    
    constructor(props){
        super(props);
        
        this.state = {
          ticker:{}
        }
    }

    componentDidMount() {
        
        // console.log("passed the value:",this.props.inputTicker);
        // console.log("passed the value-1:",this.state.ticker);

    }
  
    render(){
        return(
            
            <div className="PriceModel" >
            
             
                    <table className="table mt-5">
                        <thead>
                            <tr>
                                <th>Ticker</th>
                                <th>Company</th>
                                <th>Price</th>
                                <th>PE Ratio</th>
                    
                            </tr>
                        </thead>

                        <tbody>
                           {/* <SearchBar handleSubmit={this.props.handleSubmit}/> */}
                            <StockData ticker = {this.props.inputTicker}/>

                        </tbody>
                    </table>
            </div>

         );
    }
}

export default PriceModel;

StockData.js In this file it just takes value and calls the api to get the appropriate information to be evaluated. Once the information is calculated it passes back to the PriceModel.js to be printed as a table format.

CodePudding user response：

Inside your PriceModel component:

<SearchBar handleSubmit={(input)=> this.setState({ticker: input})}/>

CodePudding user response：

basically what you need to do is to lift the state up to the parent, and then you can pass a function to execute when you have to change that state, in your case when we are changing the input in searchBar component. so you need the state with a function that handles change and then inside the parent searchbar, then where you have to make a change or any calculation like in priceModel, you pass the function that handles the change, and where you need to print the result in StockData.js you have to just pass the state as a prop.

you can read more here in react docs: https://reactjs.org/docs/lifting-state-up.html

hope you got the point, if not, let me know and I'll try to be more clear.