JSX not returning map function with React

Question

I have worked on this problem for quite some time and I am at a lost on how to continue forward. I am trying to return a description of a stock when a certain symbol is entered into the input field. The console.log returns the value of the description when a symbols are entered but it doesn't render it to the page. I have tried to return the whole statement including the map function but that just cancels out my other return statement. I don't know what else to do. Can someone point me in the right direction?

Here is my code:

render() {
        const { stockSymbol, userInput } = this.state




        stockSymbol.map((stock, i) => {

            if (userInput === stock.symbol) {

                return <h2 className="symboldescription" key={i}>
                    {stock.description}
                </h2>,

                    console.log(stock.description + " match")

            }
        })

        return (
            <div className="enterstock">
                <h1 className="title">Enter Stock Symbol</h1>
                <span className="symbol">{this.state.userInput}</span>
                <form className="inputfields" onSubmit={this.getSymbol}>
                    <input type="text" className="symfields" name="symbolname" onChange={this.typeSymbol}></input>
                    <button type="submit" className="btn">Send</button>
                </form>
            </div >
        )

    }
}

wentjun · Accepted Answer · 2020-07-14 18:32:23Z

3

You should be including it as part of the return statement for the render method. For example,

render() {
  const { stockSymbol, userInput } = this.state;

  return (
    <div className="enterstock">
      <h1 className="title">Enter Stock Symbol</h1>
      <span className="symbol">{this.state.userInput}</span>
      <form className="inputfields" onSubmit={this.getSymbol}>
        <input type="text" className="symfields" name="symbolname" onChange={this.typeSymbol}></input>
        <button type="submit" className="btn">Send</button>
      </form>
      {stockSymbol.map((stock, i) => {
        if (userInput === stock.symbol) {
          return <h2 className="symboldescription" key={i}>
            {stock.description}
          </h2>
        }
      })}
    </div>
  )
}

answered Jul 14, 2020 at 18:32

wentjun

42.9k10 gold badges108 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alanaj Over a year ago

Thank you so much, this solved the problem. I hope you have a wonderful day because you've made mine!

KushalSeth · Accepted Answer · 2020-07-14 18:36:48Z

the return of your map is not assigned to a variable. You can assign to a variable, and then use in your return of component. something like this:

let description =         stockSymbol.map((stock, i) => {

           if (userInput === stock.symbol) {

               return <h2 className="symboldescription" key={i}>
                   {stock.description}
               </h2>,

                   console.log(stock.description + " match")

           }
       })

and then use in the return of component

        return (
            <div className="enterstock">
                <h1 className="title">Enter Stock Symbol</h1>
                <span className="symbol">{this.state.userInput}</span>
                <form className="inputfields" onSubmit={this.getSymbol}>
                    <input type="text" className="symfields" name="symbolname" onChange={this.typeSymbol}></input>
                    <button type="submit" className="btn">Send</button>
                </form>
                {description}
            </div >
        )

Collectives™ on Stack Overflow

JSX not returning map function with React

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related