JSX не возвращает функцию карты с React

Question

Я работал над этой проблемой довольно долгое время и не знаю, как двигаться дальше. Я пытаюсь вернуть описание акции, когда в поле ввода вводится определенный символ. Console.log возвращает значение описания при вводе символов, но не отображает его на странице. Я попытался вернуть весь оператор, включая функцию карты, но это просто отменяет мой другой оператор return. Я не знаю, что еще делать. Может ли кто-нибудь указать мне правильное направление?

Вот мой код:

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 >
        )

    }
}

Answer 1

Вы должны включить его как часть оператора return для метода render. Например,

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>
  )
}

Answer 2

возврат вашей карты не привязан к переменной. Вы можете присвоить переменной, а затем использовать в возврате компонента. примерно так:

let description =         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>
                {description}
            </div >
        )