Uncaught type error: map function is not working for array variable

Question

I am new to React. I have an array variable but when I call map function it doesn't work. I get "Uncaught (in promise) TypeError: this.state.products.map is not a function"

class Child extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            products: []
        };

componentDidMount() {
        fetch(url)
            .then((Response) => {
                this.setState({
                    products: Response.json()
                });
            })
            .catch(err => console.error);
    }
}

 render() {
        return (
            <div>
                <div className="col-lg-12">
                    {this.state.products.map(product1 => (
                        <Button key={product1.id} style={{ color: 'grey', radius: '5px', width: '90px' }}>
                            {product1.title}
                        </Button>
                    ))}
                    <br /><br /><br />
                </div>
            </div>
        );
    }
}
export default Category;

Where am I going wrong? Thank you.

Please share the output of console.log(Response.json())

RIYAJ KHAN
– RIYAJ KHAN

2018-07-20 11:52:44 +00:00
Commented Jul 20, 2018 at 11:52 — RIYAJ KHAN
– RIYAJ KHAN, Commented Jul 20, 2018 at 11:52

Yury Tarabanko · Accepted Answer · 2018-07-20 13:12:07Z

2

Response.json() is a Promise. MDN. Assuming you are getting an array from the server you need

componentDidMount() {
        fetch(url)
            .then(res => res.json())
            .then((products) => {
                this.setState({
                    products
                });
            })
            .catch(console.error); // because err => console.error is a noop
    }
}

edited Jul 20, 2018 at 13:12

answered Jul 20, 2018 at 11:53

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

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

Comments

Azamat Zorkanov · Accepted Answer · 2018-07-20 11:52:10Z

0

I guess, when you're getting response the json response isn't array:

products: Response.json()

Could you please, check, if it actually array

answered Jul 20, 2018 at 11:52

Azamat Zorkanov

8191 gold badge5 silver badges9 bronze badges

Collectives™ on Stack Overflow

Uncaught type error: map function is not working for array variable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related