Why isn't the map function iterating over the array?

Question

I am using React, which I am new to and it says to use the map method to iterate over the array. When I do that the entire array logs to the console and not the individual words I want.

I am trying to call stock symbols when a user types them in the text box. But under the function getSymbol() the state of symbol is still an array even when I used map in render. Can anyone point me in the right direction? Or what can I do to get single elements.

Here is my code:

class Symbol extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            userInput: '',
            symbol: [],
            isLoaded: false
        }
    }

    typeSymbol = (e) => {
        this.setState({
            userInput: e.target.value.toUpperCase()
        }, () => {
            console.log(this.state.userInput)
        })
    }

    getSymbol = (e) => {
        e.preventDefault(),
            this.setState({
                symbol: this.state.symbol

            }, () => {
                console.log(this.state.symbol)
            })
    }

    componentDidMount() {
        fetch(`https://finnhub.io/api/v1/stock/symbol?exchange=US&token=${key}`)
            .then(res => res.json())
            .then(
                (results) => {
                    this.setState({
                        isLoaded: true,
                        symbol: results
                    });
                    // console.log(this.state.symbol)
                },
                (error) => {
                    this.setState({
                        isLoaded: true,
                        error
                    });
                }
            )
    }


    render() {
        const { symbol, userInput } = this.state
        if (userInput === symbol) {
            return (

                symbol.map((symbol, i) => (<span className="symbol" key={i}>{symbol.displaySymbol}</span>)),
                console.log('same')
            )
        } else {
            return (
                <div className="enterstock">
                    <h1 className="title">Enter Stock Symbol</h1>
                    <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 >
            )
        }

    }
}

Just a suggestion, But I think your class name is colliding with a built in JS feature called Symbol. — John Pavek
– John Pavek, Commented Jul 13, 2020 at 19:31

drnugent · Accepted Answer · 2020-07-13 19:35:57Z

1

You're using symbol in two different ways, and they're colliding. Try renaming the parameter of your map() function:

symbol.map((s, i) => (<span className="symbol" key={i}>{s.displaySymbol}</span>)),

symbol is not a reserved word in JavaScript, so you should be good there.

answered Jul 13, 2020 at 19:35

drnugent

1,5459 silver badges23 bronze badges

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

3 Comments

Alanaj Over a year ago

Thanks for the info but I am still getting the array.

drnugent Over a year ago

Can you post the output and console log?

Alanaj Over a year ago

I posted the picture up top and I am using console.log(this.state.symbol) to render the output

Jonathan Akwetey Okine · Accepted Answer · 2020-07-13 23:14:53Z

1

The problem is with your if block. The map method works fine. What is happening is you are comparing the userInput(String) to symbol(an array) it will not work. I don't know what check you're trying to do. But if it is to check whether the userInput is in the array you're doing it wrongly.

import React from "react";
class Symbol extends React.Component {
constructor(props) {
super(props);
this.state = {
  userInput: "",
  symbol: [],
  isFiltered: false,
  isLoaded: false,
 };
}

typeSymbol = (e) => {
this.setState(
  {
    userInput: e.target.value.toUpperCase(),
  },
  () => {
    console.log(this.state.userInput);
  }
 );
};

getSymbol = (e) => {
e.preventDefault();
const filter = this.state.symbol.filter(
  (el) => el.displaySymbol === this.state.userInput
);
// console.log(filter);
this.setState(
  {
    symbol: filter,
    isFiltered: true,
  },
  () => {
    console.log(this.state.symbol);
   }
 );
};

componentDidMount() {
fetch(`https://finnhub.io/api/v1/stock/symbolexchange=US&token=${key}`)
  .then((res) => res.json())
  .then(
    (results) => {
      this.setState({
        isLoaded: true,
        symbol: results,
      });
      console.log(this.state.symbol);
      },
      (error) => {
      this.setState({
        isLoaded: true,
        error,
      });
     }
   );
  }

 render() {
 const { symbol, userInput } = this.state;
 //console.log(userInput);
 if (this.state.isFiltered) {
  return symbol.map((symbol, i) => {
    return (
      <span className="symbol" key={i}>
        {symbol.displaySymbol}
      </span>
    );
  });
} else {
  return (
    <div className="enterstock">
      <h1 className="title">Enter Stock Symbol</h1>
      <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>
  );
  }
 }
}
export default Symbol;

edited Jul 13, 2020 at 23:14

answered Jul 13, 2020 at 20:01

Jonathan Akwetey Okine

1,3203 gold badges17 silver badges18 bronze badges

5 Comments

Alanaj Over a year ago

Hi, this is what I thought i was doing wrong and you gave me the code but it's not working. I must be out putting the state of symbol wrong.

Alanaj Over a year ago

@ Jonathan Akwetey Okine Thanks for that information. How do I got about comparing the two then because I thought once you get a single element from map, it becomes a string.

Jonathan Akwetey Okine Over a year ago

@Alanaj I only gave you a suggestion but can tell me exactly what you want to do with your if condition so I assist?

Alanaj Over a year ago

@ Jonathan Akwetey Okine So, when a when a user types in the input field which is the userInput, they are supposed to press send and the corresponding symbol is supposed to match to the symbol that they typed in. It is supposed to return information about that stock symbol but right now I'm just returning the name.

Alanaj Over a year ago

@ Jonathan Akwetey Okine Thanks for all your help but that didn't work. I still have trouble accessing the array in the getSymbol function. It returns an object and I think I may be having trouble with the async call.

Collectives™ on Stack Overflow

Why isn't the map function iterating over the array?

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related