Chapters

43 Chapters | 5:00:38 |

01

The World of React + ESLint

8:13
02

React.createElement()

6:40
03

JSX

6:27
04

React Components

8:50
05

Props

6:40
06

Collection & Rendering a Table

6:28
07

The key Prop & Inline Rendering

4:38
08

Build the Static App First

8:05
09

State: For Magic Updating Good Times

8:32
10

Handling Events (like onClick)!

4:41
11

Child Component

8:35
12

Notifying Parent Components: Callback Props

5:24
13

Smart vs Dumb Components

8:48
14

Prop Validation: PropTypes

6:40
15

Removing propTypes on Production

3:01
16

Moving the Rep Logs to State

5:01
17

Smart Components & Spread Attributes

6:06
18

Handling a Form Submit

8:24
19

New Component to Hold our Form

8:25
20

Refs

9:36
21

Immutability / Don't Mutate my State!

8:34
22

Dumb Components with State

4:53
23

Form Validation State

5:12
24

Controlled Form Input

9:20
25

Controlled Component Form

9:17
26

Deleting Items

6:15
27

API Setup & AJAX with fetch()

7:14
28

API Auth & State via AJAX

7:33
29

Loading Messages

3:38
30

Hitting the DELETE Endpoint

6:37
31

The POST Create API

9:04
32

Polyfills: fetch & Promise

5:19
33

Success Messages + The Style Attribute

6:27
34

Temporary Messages & componentWillUnmount

6:14
35

Updating Deep State Data

7:12
36

Server Validation & fetch Failing

5:59
37

Displaying Server Validation Errors

7:40
38

...Object Rest Spread

6:40
39

Passing Data from your Server to React

7:11
40

Passing Server Data to React Props

8:45
41

Reusable Components

9:14
42

CSRF Protection Part 1

5:25
43

CSRF Protection Part 2

7:39

This course is archived!

While the concepts of this course are still largely applicable, it's built using an older version of Symfony (4) and React (16).

> JavaScript Frameworks & Tools > React with Symfony

Buy Access to Course

21.

Immutability / Don't Mutate my State!

|

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Chapter

Next Chapter

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Login or register to check out the script

15 Comments

Sort By

Login or Register to join the conversation

Helmi 6 years ago edited

this.setState(prevState => ( {repLogs: [...prevState.repLogs, newRep]} ));

I'm a little confused, how prevState has been passed automatically during this call ?

1 |

Helmi Helmi 6 years ago

I found it https://en.reactjs.org/docs...

|

weaverryan SFCASTS Helmi 6 years ago edited

Boom! Good find Helmi!

It's not really JavaScript magic (other than the arrow syntax stuff) - it's just that you can pass setState() an object (the normal use-case) OR a function that it will call where you then return the new state. When React calls that function, it passes you the previous state as the first argument.

For me, it's the syntax here that's the most confusing. Here is an expanded version (in case it helps anyone) of the setState() call:


// this code
this.setState(prevState => ( {repLogs: [...prevState.repLogs, newRep]} ));

// is basically equivalent to
this.setState(function(prevState) {
    return {
        repLogs: [...prevState.repLogs, newRep]
    };
});

Cheers!

1 |

Yurniel L. 5 years ago edited

<i>Uncaught TypeError: Cannot read property 'setState' of undefined</i>

I don't know where is my error. Any help please?


export default class RepLogApp extends Component {
    constructor(props) {
        super(props);

        this.state = {
            highlightedRowId: null,
            repLogs: [
                { id: uuidv4(), reps: 25, itemLabel: "My Laptop", totalWeight: 112.5 },
                { id: uuidv4(), reps: 10, itemLabel: "Big fat Cat", totalWeight: 180 },
                { id: uuidv4(), reps: 4, itemLabel: "Big fat Cat", totalWeight: 72 }
            ]
        }
        
        this.handleRowMouseOver = this.handleRowMouseOver.bind(this);
        this.handleAppRepLog = this.handleAddRepLog.bind(this);
    }

    handleRowMouseOver(repLogId) {
        this.setState({highlightedRowId: repLogId});
    }

    handleAddRepLog(itemLabel, reps) {
        const newRep = {
            id: uuidv4(),
            itemLabel,
            reps,
            totalWeight: Math.floor(Math.random() * 50)
        };
        
        this.setState(prevState => ( {repLogs: [...prevState.repLogs, newRep] }) );
    }

    render() {
        return (
             // this line is being formatted (!)
            <RepLogs {...this.props} {...this.state} onRowMouseOver={this.handleRowMouseOver} onAddRepLog={this.handleAddRepLog} /> 
        );
    }
}

RepLogApp.propTypes = {
    withTitle: PropTypes.bool
};

|

MolloKhan SFCASTS Yurniel L. 5 years ago edited

Hey Yurniel L.

Hmm, the piece of code you pasted looks good to me. Could you check which line is causing that error?

|

Yurniel L. MolloKhan 5 years ago edited

Hi MolloKhan
This is the line whis causes the error on submitting the form:

this.setState(prevState => ( {repLogs: [...prevState.repLogs, newRep] }) );

|

MolloKhan SFCASTS Yurniel L. 5 years ago edited

hmm, your code looks good to me but I'd have to look inside the replogs component and see how it's using the onaddreplog function. Something is messing with the this variable

|

Yurniel L. MolloKhan 5 years ago

I finally saw my error :-o
In the constructor this.handleAppRepLog != this.handleAddRepLog.bind(this);

Thanks for your time!

|

MolloKhan SFCASTS Yurniel L. 5 years ago

Ha! that kind of errors are easy to overlook :)

|

AndTheGodsMadeLove 7 years ago edited

Can someone tell me why
<br />this.setState(prevState => {repLogs: [...prevState.repLogs, newRep]});<br />
is not working? isn't this just a shorter version of
`
this.setState(prevState => {

return {repLogs: [...prevState.repLogs, newRep]};

});
`

I already apologize for the dumb question ;-)

|

MolloKhan SFCASTS AndTheGodsMadeLove 7 years ago edited

Hey AndTheGodsMadeLove

You just hit an edge case. When you want to return an object using the short version, then you need to wrap the function body with parenthesis
this.setState(prevState => ( {repLogs: [...prevState.repLogs, newRep]} ));

|

AndTheGodsMadeLove MolloKhan 7 years ago

Thank you sir!

|

GDIBass 7 years ago edited

@5:35 Another way to do it is:


const newRepLogs = this.state.repLogs.slice(0).concat(newRep);

Slice creates a new object of the array. We can select a specific index or just pass 0 to get the whole array

|

weaverryan SFCASTS GDIBass 7 years ago edited

Nice GDIBass! I think this is one of the tricks with all this immutability: find a few set of tools that make sense to YOU so that you don't go insane always trying to remember how to do these :). I like the ... syntax, but this one also makes a lot of sense to me.

Cheers!

1 |

GDIBass weaverryan 7 years ago

Yeah I really like that ... syntax, too. I'm going to use that one from now on :)

|

While the concepts of this course are still largely applicable, it's built using an older version of Symfony (4) and React (16).

Symfony 4 React 16

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.2.0",
        "ext-iconv": "*",
        "composer/package-versions-deprecated": "^1.11", // 1.11.99
        "doctrine/annotations": "^1.0", // v1.8.0
        "doctrine/doctrine-bundle": "^1.6", // 1.9.1
        "doctrine/doctrine-cache-bundle": "^1.2", // 1.3.3
        "doctrine/doctrine-fixtures-bundle": "~3.0", // 3.0.2
        "doctrine/doctrine-migrations-bundle": "^1.2", // v1.3.1
        "doctrine/orm": "^2.5", // v2.7.2
        "friendsofsymfony/jsrouting-bundle": "^2.2", // 2.2.0
        "friendsofsymfony/user-bundle": "dev-master#4125505ba6eba82ddf944378a3d636081c06da0c", // dev-master
        "phpdocumentor/reflection-docblock": "^3.0|^4.0", // 4.3.0
        "sensio/framework-extra-bundle": "^5.1", // v5.2.0
        "symfony/asset": "^4.0", // v4.1.4
        "symfony/cache": "^3.3|^4.0", // v4.1.4
        "symfony/console": "^4.0", // v4.1.4
        "symfony/flex": "^1.0", // v1.21.6
        "symfony/form": "^4.0", // v4.1.4
        "symfony/framework-bundle": "^4.0", // v4.1.4
        "symfony/lts": "^4@dev", // dev-master
        "symfony/monolog-bundle": "^3.1", // v3.3.0
        "symfony/polyfill-apcu": "^1.0", // v1.9.0
        "symfony/property-access": "^3.3|^4.0", // v4.1.4
        "symfony/property-info": "^3.3|^4.0", // v4.1.4
        "symfony/serializer": "^3.3|^4.0", // v4.1.4
        "symfony/swiftmailer-bundle": "^3.1", // v3.2.3
        "symfony/twig-bundle": "^4.0", // v4.1.4
        "symfony/validator": "^4.0", // v4.1.4
        "symfony/yaml": "^4.0", // v4.1.4
        "twig/twig": "2.10.*" // v2.10.0
    },
    "require-dev": {
        "easycorp/easy-log-handler": "^1.0.7", // v1.0.7
        "symfony/debug-bundle": "^3.3|^4.0", // v4.1.4
        "symfony/dotenv": "^4.0", // v4.1.4
        "symfony/maker-bundle": "^1.5", // v1.5.0
        "symfony/phpunit-bridge": "^4.0", // v4.1.4
        "symfony/stopwatch": "^3.3|^4.0", // v4.1.4
        "symfony/var-dumper": "^3.3|^4.0", // v4.1.4
        "symfony/web-profiler-bundle": "^3.3|^4.0", // v4.1.4
        "symfony/web-server-bundle": "^4.0" // v4.1.4
    }
}

What JavaScript libraries does this tutorial use?

// package.json
{
    "dependencies": {
        "@babel/plugin-proposal-object-rest-spread": "^7.12.1" // 7.12.1
    },
    "devDependencies": {
        "@babel/preset-react": "^7.0.0", // 7.12.5
        "@symfony/webpack-encore": "^0.26.0", // 0.26.0
        "babel-plugin-transform-object-rest-spread": "^6.26.0", // 6.26.0
        "babel-plugin-transform-react-remove-prop-types": "^0.4.13", // 0.4.13
        "bootstrap": "3", // 3.3.7
        "copy-webpack-plugin": "^4.4.1", // 4.5.1
        "core-js": "2", // 1.2.7
        "eslint": "^4.19.1", // 4.19.1
        "eslint-plugin-react": "^7.8.2", // 7.8.2
        "font-awesome": "4", // 4.7.0
        "jquery": "^3.3.1", // 3.3.1
        "promise-polyfill": "^8.0.0", // 8.0.0
        "prop-types": "^15.6.1", // 15.6.1
        "react": "^16.3.2", // 16.4.0
        "react-dom": "^16.3.2", // 16.4.0
        "sass": "^1.29.0", // 1.29.0
        "sass-loader": "^7.0.0", // 7.3.1
        "sweetalert2": "^7.11.0", // 7.22.0
        "uuid": "^3.2.1", // 3.4.0
        "webpack-notifier": "^1.5.1", // 1.6.0
        "whatwg-fetch": "^2.0.4" // 2.0.4
    }
}

Previous Chapter

Next Chapter