Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

175
Views
ReactJs the setState is not updating in sync with what is being submitted in the input box

I am not user what is causing the issue. When I input a ticker in the serach bar for example FB the data only renders half of the information but not the calculationModel and addingYear function in the componentDidUpdate, unless I reenter the input variable again in the search bar to get all the information be displayed how it suppose to be I have to renter the same or any other ticker each time to get the information to be properly displayed and I have to take the same steps when I refresh the page.

This is what my component looks like:

    constructor(props) {
        super(props);
        this.state = {
            ticker: "",

            reportDate: "",
            subkey: "",

            FCF: "",
            year: "",

            futureCashFlows: "",

            npv: "",

            terminalValue: "",
            totalPresentValue: "",
            addYear1: "",
            addYear2: "",
            addYear3: "",
            addYear4: "",
            addYear5: ""
        };
    }

    applyData(data) {
        this.setState({
            reportDate: data.reportDate,
            subkey: data.subkey,
            commonShares: data.commonShares,

            year: data.reportDate.slice(0, 4)
        });
    }

    CalulationModel() {
        const DCF_Calulation = calculate(
            this.state.FCF,
            [this.props.growthRate],
            this.props.peRate,
            this.props.discouted,
            2
        );

        this.setState({
            futureCashFlows: DCF_Calulation.futureCashFlows.slice(1, 6),
            totalPresentValue: DCF_Calulation.totalPresentValue,
            npv: Math.pow(1 + this.props.discoutedRate, 5)
        });
    }
    printState() {
        console.log("New state AFTER update");
        console.log(this.state);
    }

    addingYear() {
        // const myDate = moment(this.state.reportDate, "YYYY-MM-DD");
        const myDate = moment(this.state.year, "YYYY");

        this.setState(
            {
                addYear1: myDate.add(1, "y").format("YYYY"), // 2022
                addYear2: myDate.add(1, "y").format("YYYY"), // 2023
                addYear3: myDate.add(1, "y").format("YYYY"), // 2024
                addYear4: myDate.add(1, "y").format("YYYY"), // 2025
                addYear5: myDate.add(1, "y").format("YYYY") // 2026
            },
            this.printState
        );
    }

    componentDidUpdate(prevState) {
        if (this.props.ticker !== prevState.ticker) {
            stockFinancial.stockPulledData(
                this.props.ticker,
                this.applyData.bind(this)
            );

            this.CalulationModel();
            this.addingYear();
        }
    }
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!