React functional component not updating when pushing data to array

Question

I have this functional component which is not updating when pushing data to an array:

const Experience = (props) => {
    let experience = [{
        from:"", 
        to:"",
        employer_name:"",
        employer_number:""
    }];

    function addExperience() {
        experience = [...experience, {
            from:"", 
            to:"",
            employer_name:"",
            employer_number:"",
        }];
    }

    return (
        <>
            {experience.map((val, idx) => {
                let id = `exp-id-${idx}`

                return(
                    <div key={idx} id={id}>
                        ...
                    </div>
                )
            })}
            <button onClick={addExperience}>Add experience</button>
        </>
    )
}

When Add experience is clicked the mapping is not updated, any help?

you need to store experience in state. And for that you can either use useState hook or make this a class component and use this.state = {} — Abdullah
– Abdullah, Commented May 15, 2019 at 19:18

Community · Accepted Answer · 2020-06-20 09:12:55Z

5

Although you're updating the variable, the component itself is not rerendering. A functional component will trigger a render when one of its props update.

In order to get the desired behavior, you have to use state, either with the useState hook or by using a class component with state.

Functional component with React Hooks

import React, { useState } from 'react';

const Experience = (props) => {
    const [experience, setExperience] = useState([{
        from:"", 
        to:"",
        employer_name:"",
        employer_number:""
    }]);

    function addExperience() {
        setExperience([...experience, {
            from:"", 
            to:"",
            employer_name:"",
            employer_number:"",
        }]);
    }

    return (
        <>
            {experience.map((val, idx) => {
                let id = `exp-id-${idx}`

                return(
                    <div key={idx} id={id}>
                        ...
                    </div>
                )
            })}
            <button onClick={addExperience}>Add experience</button>
        </>
    )
}

Class Component

import React, { Component } from 'react'

class Experience extends Component {
    state = {
        experience: [{
            from:"", 
            to:"",
            employer_name:"",
            employer_number:""
        }]
    };

    function addExperience() {
        this.setState([...this.state.experience, {
            from:"", 
            to:"",
            employer_name:"",
            employer_number:"",
        }]);
    }

    return (
        <>
            {this.state.experience.map((val, idx) => {
                let id = `exp-id-${idx}`

                return(
                    <div key={idx} id={id}>
                        ...
                    </div>
                )
            })}
            <button onClick={this.addExperience}>Add experience</button>
        </>
    )
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 15, 2019 at 19:20

toads

1365 bronze badges

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

3 Comments

ekclone Over a year ago

So how do I change the addExperience function to add an array, the docs page only shows a simple string change

J.Ko Over a year ago

what are <> and </> for?

toads Over a year ago

That's shorthand syntax for fragments: reactjs.org/docs/fragments.html#short-syntax

Collectives™ on Stack Overflow

React functional component not updating when pushing data to array

1 Answer 1

Functional component with React Hooks

Class Component

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Functional component with React Hooks

Class Component

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related