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

18.

Handling a Form Submit

|

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

7 Comments

Sort By

Login or Register to join the conversation

CloudCreators 4 years ago edited

The console.log is showing the reps but just for like a second and it goes away. the Highlighed row id is changing when I click on a row but the color doesnt change it was happening in the start but now it doesnt work.


// RepLogList.js

import React from 'react';
import PropTypes from 'prop-types';  
export default function RepLogList(props){

    const {highlightedRowId , onRowClick , repLogs} = props; 
    return(
        <tbody>
            {repLogs.map((repLog)=>(
                <tr 
                key={repLog.id}
                className={highlightedRowId===repLog.id?'info':''}
                onClick={()=>onRowClick(repLog.id)}
                >
                <td>{repLog.itemLabel}</td>
                <td>{repLog.reps}</td>
                <td>{repLog.totalWeightLifted}</td>
                <td>.....</td>
                </tr>
            ))}
        </tbody>
    );
}

RepLogList.propTypes = {
    highlightedRowId: PropTypes.any,
    onRowClick: PropTypes.func.isRequired,
    repLogs : PropTypes.array.isRequired,
};

//RepLogApp.js

import React,{Component} from 'react';
import RepLogs from './RepLogs';
import PropTypes from 'prop-types';

export default class RepLogApp extends Component{

constructor(props){
    super(props);
    this.state = {
        highlightedRowId : null,
        repLogs : [
            { id: 1, reps: 25, itemLabel: 'My Laptop', totalWeightLifted: 112.5 },
            { id: 2, reps: 10, itemLabel: 'Big Fat Cat', totalWeightLifted: 180 },
            { id: 8, reps: 4, itemLabel: 'Big Fat Cat', totalWeightLifted: 72 }
        ],
    };
    this.handleRowClick = this.handleRowClick.bind(this);
}

handleRowClick(repLogId){
    this.setState({highlightedRowId:repLogId});
}
handleNewItemSubmit(itemName,reps){
    console.log('hello');
    console.log(itemName,reps);
}

render(){
    return(
        <RepLogs
            {...this.props}
            {...this.state}
            onRowClick = {this.handleRowClick}
            onNewItemSubmit = {this.handleNewItemSubmit}
        />
    );
}

}

RepLogApp.propTypes = {

withHeart: PropTypes.bool,

};



I dont know what is wrong but the color should change I applied the classname info.

|

weaverryan SFCASTS CloudCreators 4 years ago edited

Hey CloudCreators!

Sorry for the VERY slow reply - you sent this *just* as I was leaving for a holiday, and nobody else on the team was sure of a good answer for you :).

There is one thing you wrote that I think is really interesting - and could be a clue:

> The console.log is showing the reps but just for like a second and it goes away

Under normal circumstances, I can't think of any reason that a message would disappear from the console log... *except* if the page were performing a full page refresh/navigation. Is it possible that something is navigating the page? So, you see the console.log() for 1 moment, but that click also triggers a navigation. And so, about .5 seconds later, the page navigates away (or, more likely, it reloads) and the console clears. One way to test this is to click the "gear" icon on the upper right of the console area, and check "preserve log". Then, the log will stay even after a refresh. If that makes the log NOT disappear, then it confirms that something is navigating the whole page.

Let me know if that helps out :).

Cheers!

|

CloudCreators weaverryan 4 years ago

Yes I clicked the gear and preserved log and it works but idk why it was reloading again and again.

|

weaverryan SFCASTS CloudCreators 4 years ago edited

Hey CloudCreators!

Sorry for the slow reply! If it's working now and you can't repeat the problem, I wouldn't worry about it. Perhaps something was going weird with the Webpack build process :).

Cheers!

|

Mouad E. 7 years ago

why you didn't add handleNewItemSubmit to the constructor and bind it like
this.handleRowClick = this.handleRowClick.bind(this);

|

Victor SFCASTS Mouad E. 7 years ago

Hey Mouerr,

Good question! But the answer is simple: we just don't need it for now. You need to understand why we call that .bind(this). Actually, we'll do it later in https://symfonycasts.com/sc... , but for now that binding context is not important because we just call console.log() inside, i.e. don't use "this" at all.

Cheers!

1 |

Mouad E. Victor 7 years ago

Hi Victor,
Thanks for your support.

|

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