Skip to content

Instantly share code, notes, and snippets.

@SubhashiniSundaresan

SubhashiniSundaresan/Handling Dynamic Content "The JavaScript Way"

Last active May 19, 2019 18:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save SubhashiniSundaresan/72310947bd873b86978d3a98f6d50030 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save SubhashiniSundaresan/72310947bd873b86978d3a98f6d50030 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. SubhashiniSundaresan revised this gist May 19, 2019. 1 changed file with 36 additions and 0 deletions.
    36 changes: 36 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    //ErrorBoundary.js

    import React, { Component } from 'react'

    class ErrorBoundary extends Component {
    state = {
    hasError: false,
    errorMessage: ''
    }

    componentDidCatch = (error, info) =>
    {
    this.setState({haserror: true, errorMessage: error})
    }

    render() {
    if (this.state.hasError) {
    return <h1>{this.state.errorMessage}</h1>
    } else {
    return this.props.children
    }
    }
    }

    export default ErrorBoundary;

    //Person.js

    <ErrorBoundary key={person.id}>
    <Person
    click={() => this.props.clicked(index)}
    name={person.name}
    age={person.age}
    changed={(event) => this.props.changed(event, person.id)}
    />
    </ErrorBoundary
  2. SubhashiniSundaresan revised this gist May 19, 2019. 1 changed file with 25 additions and 1 deletion.
    26 changes: 25 additions & 1 deletion Radium - CSS
    View file
    Original file line number Diff line number Diff line change
    @@ -126,4 +126,28 @@ class App extends Component {
    }
    }

    export default Radium(App);
    export default Radium(App);


    //Person.js

    import React from 'react';
    import Radium from 'radium'
    import './Person.css'

    const person = (props) =>
    {
    const style = {
    '@media (min-width: 500px)': {
    width: '450px'
    }
    }
    return (
    <div className="Person" style={style}>
    <p onClick={props.click}>I'm a {props.name} and i am {props.age} years old!!</p>
    <p>{props.children}</p>
    <input type="text" onChange={props.changed} value={props.name}/>
    </div>
    )
    };
    export default Radium(person);
  3. SubhashiniSundaresan revised this gist May 19, 2019. 1 changed file with 129 additions and 0 deletions.
    129 changes: 129 additions & 0 deletions Radium - CSS
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,129 @@
    import React, { Component } from 'react';
    import './App.module.css';
    import Radium, { StyleRoot } from 'radium'
    import Person from '../components/Persons/Person/Person';

    class App extends Component {
    state = {
    persons: [
    { id: '123456A', name: 'Max', age: 28 },
    { id: '123456B', name: 'Manu', age: 29 },
    { id: '123456C', name: 'Stephanie', age: 26 }
    ],
    otherState: 'some other value',
    showPersons: false
    };

    switchNameHandler = (NewName = 'dave') => {
    // console.log('Was clicked!');
    // DON'T DO THIS: this.state.persons[0].name = 'Maximilian';
    this.setState({
    persons: [
    { name: NewName, age: 28 },
    { name: 'Manu', age: 29 },
    { name: 'Stephanie', age: 27 }
    ]
    });
    };


    togglePersonsHandler = () =>
    {
    const currentShow = this.state.showPersons
    this.setState({showPersons: !currentShow})
    }

    nameChangedHandler = (event, id) =>
    {

    const personIndex = this.state.persons.findIndex((person) => {
    return person.id === id
    })

    const person = {...this.state.persons[personIndex]}

    person.name = event.target.value

    const persons = [...this.state.persons]
    persons[personIndex] = person;

    this.setState({ persons });
    }

    deletePersonHandler = (personIndex) =>
    {
    const persons = [...this.state.persons];
    persons.splice(personIndex, 1)
    this.setState({persons})
    }

    /*
    NOTE:
    that if onClick={this.togglePersonsHandler("somevar")} the function get called instantly
    so you need to use
    onClick={() => this.togglePersonsHandler("somevar")} this will call the function correctly once clicked
    to call function that takes no values use:
    <button style={style} onClick={this.togglePersonsHandler}>Switch Name</button>
    */

    render() {
    // inline styling example
    const style = {
    backgroundColor: 'green',
    color: 'white',
    font: 'inherit',
    border: '1px solid blue',
    padding: '8px',
    cursor: 'pointer',
    ':hover': {
    backgroundColor: 'lightgreen',
    color: 'black'
    }
    }

    let persons = null;

    if (this.state.showPersons) {
    persons = (
    <div>
    {this.state.persons.map((person, index) => {
    return <Person
    click={() => this.deletePersonHandler(index)}
    name={person.name}
    age={person.age}
    key={person.id}
    changed={(event) => this.nameChangedHandler(event, person.id)} />
    })}
    </div>
    );
    style.backgroundColor = 'red'
    style[':hover'] = {
    backgroundColor: 'salmon',
    color: 'black'
    }
    }

    let cssclasses = [];
    if (this.state.persons.length <= 2) {
    cssclasses.push('red');
    }
    if (this.state.persons.length <= 1) {
    cssclasses.push('bold')
    }


    return (
    <StyleRoot>
    <div className="App">
    <h1>Hi, I'm a React App</h1>
    <p className={cssclasses.join(' ')} >This is really working!</p>
    <button style={style} onClick={this.togglePersonsHandler}>toggle person</button>
    {persons}
    </div>
    </StyleRoot>
    );
    // return React.createElement('div', {className: 'App'}, React.createElement('h1', null, 'Does this work now?'));
    }
    }

    export default Radium(App);
  4. SubhashiniSundaresan revised this gist May 19, 2019. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions List & keys
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    https://github.com/chesterheng/cheatsheet/blob/3fd1f64366f7720fb202f47e7ac3e66697230d72/React/04_Working_with_Lists_and_Conditionals.md
  5. SubhashiniSundaresan revised this gist May 19, 2019. 1 changed file with 48 additions and 0 deletions.
    48 changes: 48 additions & 0 deletions Handling Dynamic Content "The JavaScript Way"
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,48 @@
    import React, { Component } from 'react';
    import './App.css';
    import Person from './Person/Person';

    class App extends Component {
    state = {
    persons: [
    { name: 'Max', age: 28 },
    { name: 'Manu', age: 29 },
    { name: 'Step', age: 26 }
    ],
    showPersons: false
    };

    togglePersonsHandler = () => {
    this.setState({ showPersons: !this.state.showPersons });
    };

    render() {
    let persons = null;
    if (this.state.showPersons) {
    persons = (
    <div>
    <Person name={this.state.persons[0].name} age={this.state.persons[0].age} />
    <Person
    name={this.state.persons[1].name}
    age={this.state.persons[1].age}
    click={() => this.switchNameHandler('John')}
    changed={this.nameChangedHandler}>
    My Hobbies: Racing
    </Person>
    <Person name={this.state.persons[2].name} age={this.state.persons[2].age} />
    </div>
    );
    }

    return (
    <div className="App">
    <button style={style} onClick={this.togglePersonsHandler}>
    Show persons
    </button>
    {persons}
    </div>
    );
    }
    }

    export default App;
  6. SubhashiniSundaresan revised this gist May 19, 2019. 1 changed file with 41 additions and 0 deletions.
    41 changes: 41 additions & 0 deletions Render Conditionally
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,41 @@
    import React, { Component } from 'react';
    import './App.css';
    import Person from './Person/Person';

    class App extends Component {
    state = {
    persons: [
    { name: 'Max', age: 28 },
    { name: 'Manu', age: 29 },
    { name: 'Step', age: 26 }
    ],
    showPersons: false
    };

    togglePersonsHandler = () => {
    this.setState({ showPersons: !this.state.showPersons });
    };

    render() {
    return (
    <div className="App">
    <button onClick={this.togglePersonsHandler}>Show persons</button>
    {this.state.showPersons ? (
    <div>
    <Person name={this.state.persons[0].name} age={this.state.persons[0].age} />
    <Person
    name={this.state.persons[1].name}
    age={this.state.persons[1].age}
    click={() => this.switchNameHandler('John')}
    changed={this.nameChangedHandler}>
    My Hobbies: Racing
    </Person>
    <Person name={this.state.persons[2].name} age={this.state.persons[2].age} />
    </div>
    ) : null}
    </div>
    );
    }
    }

    export default App;
  7. SubhashiniSundaresan revised this gist May 19, 2019. 1 changed file with 91 additions and 0 deletions.
    91 changes: 91 additions & 0 deletions adding css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,91 @@
    // App.js
    import React, { useState } from 'react';
    import './App.css';
    import Person from './Person/Person'

    const app = (props) => {
    const [personsState, setPersonsState] = useState({
    persons:[
    {name:'Max', age: 28},
    {name:'Manu', age: 29},
    {name:'Stephanie', age: 26}
    ]
    });
    const nameChangedHandler = (event) => {
    setPersonsState({
    persons:[
    {name:event.target.value,age:28},
    {name:event.target.value,age:29},
    {name:event.target.value,age:26}
    ]
    });
    };
    const switchNameHandler = (newName) => {
    setPersonsState({
    persons:[
    {name:newName,age:28},
    {name:'ABCDEF',age:29},
    {name:'ABCDEFGH',age:26}
    ]
    });
    };

    const style = {
    backgroundColor: 'white',
    font: 'inherit',
    border: '1px solid blue',
    padding: '8px',
    cursor: 'pointer'
    };

    return (
    <div className="App">
    <b>Hi I'm React App</b>
    <button style={style} onClick={() => switchNameHandler('Subhashini')} >Switch Names </button>
    <Person click={switchNameHandler.bind(this, 'bachu')}
    name={personsState.persons[0].name} changed={nameChangedHandler}
    age={personsState.persons[0].age} />
    <Person
    name={personsState.persons[1].name} changed={nameChangedHandler}
    age={personsState.persons[1].age} />
    <Person
    name={personsState.persons[2].name} changed={nameChangedHandler}
    age={personsState.persons[2].age} />
    </div>
    );

    };



    export default app;


    // Person.js

    import React, { Component } from 'react';
    import './Person.css'
    const person = (props) => {

    return (
    <div className="Person">
    <p onClick={props.click}>I'm a {props.name} and i am {props.age} years old!</p>
    <p>{props.children}</p>
    <input type="text" onChange={props.changed} value={props.name} />
    </div>
    );

    };

    export default person;

    //Person.css

    .Person {
    width: 60%;
    margin: auto;
    border: 1px solid #eee;
    box-shadow: 0 2px 3px #ccc;
    padding: 16px;
    text-align:center;
    }
  8. SubhashiniSundaresan revised this gist May 19, 2019. 1 changed file with 70 additions and 0 deletions.
    70 changes: 70 additions & 0 deletions two way binding
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,70 @@
    // App.js

    import React, { useState } from 'react';
    import './App.css';
    import Person from './Person/Person'

    const app = (props) => {
    const [personsState, setPersonsState] = useState({
    persons:[
    {name:'Max', age: 28},
    {name:'Manu', age: 29},
    {name:'Stephanie', age: 26}
    ]
    });
    const nameChangedHandler = (event) => {
    setPersonsState({
    persons:[
    {name:event.target.value,age:28},
    {name:event.target.value,age:29},
    {name:event.target.value,age:26}
    ]
    });
    };
    const switchNameHandler = (newName) => {
    setPersonsState({
    persons:[
    {name:newName,age:28},
    {name:'ABCDEF',age:29},
    {name:'ABCDEFGH',age:26}
    ]
    });
    };
    return (
    <div className="App">
    <b>Hi I'm React App</b>
    <button onClick={() => switchNameHandler('Subhashini')} >Switch Names </button>
    <Person click={switchNameHandler.bind(this, 'bachu')}
    name={personsState.persons[0].name} changed={nameChangedHandler}
    age={personsState.persons[0].age} />
    <Person
    name={personsState.persons[1].name} changed={nameChangedHandler}
    age={personsState.persons[1].age} />
    <Person
    name={personsState.persons[2].name} changed={nameChangedHandler}
    age={personsState.persons[2].age} />
    </div>
    );

    };



    export default app;

    //Person.js
    import React, { Component } from 'react';

    const person = (props) => {

    return (
    <div className="Person">
    <p onClick={props.click}>I'm a {props.name} and i am {props.age} years old!</p>
    <p>{props.children}</p>
    <input type="text" onChange={props.changed} value={props.name} />
    </div>
    );

    };

    export default person;
  9. SubhashiniSundaresan revised this gist May 19, 2019. 1 changed file with 59 additions and 0 deletions.
    59 changes: 59 additions & 0 deletions onclick
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,59 @@
    //App.js

    import React, { useState } from 'react';
    import './App.css';
    import Person from './Person/Person'

    const app = (props) => {
    const [personsState, setPersonsState] = useState({
    persons:[
    {name:'Max', age: 28},
    {name:'Manu', age: 29},
    {name:'Stephanie', age: 26}
    ]
    });

    const switchNameHandler = () => {
    setPersonsState({
    persons:[
    {name:'ABCD',age:28},
    {name:'ABCDEF',age:29},
    {name:'ABCDEFGH',age:26}
    ]
    });
    };
    return (
    <div className="App">
    <b>Hi I'm React App</b>
    <button onClick={() => switchNameHandler('Subhashini')} >Switch Names </button>
    <Person click={switchNameHandler.bind(this, 'bachu')}
    name={personsState.persons[0].name}
    age={personsState.persons[0].age} />
    <Person
    name={personsState.persons[1].name}
    age={personsState.persons[1].age} />
    <Person
    name={personsState.persons[2].name}
    age={personsState.persons[2].age} />
    </div>
    );

    };



    export default app;

    //Person.js

    import React, { Component } from 'react';

    const person = (props) => {

    return (
    <h1>I'm a person.{props.children} {props.name}</h1>
    );

    };

    export default person;
  10. SubhashiniSundaresan created this gist May 19, 2019.
    59 changes: 59 additions & 0 deletions useState
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,59 @@
    //App.js

    import React, { useState } from 'react';
    import './App.css';
    import Person from './Person/Person'

    const app = (props) => {
    const [personsState, setPersonsState] = useState({
    persons:[
    {name:'Max', age: 28},
    {name:'Manu', age: 29},
    {name:'Stephanie', age: 26}
    ]
    });

    const switchNameHandler = () => {
    setPersonsState({
    persons:[
    {name:'ABCD',age:28},
    {name:'ABCDEF',age:29},
    {name:'ABCDEFGH',age:26}
    ]
    });
    };
    return (
    <div className="App">
    <b>Hi I'm React App</b>
    <button onClick={switchNameHandler} >Switch Names </button>
    <Person
    name={personsState.persons[0].name}
    age={personsState.persons[0].age} />
    <Person
    name={personsState.persons[1].name}
    age={personsState.persons[1].age} />
    <Person
    name={personsState.persons[2].name}
    age={personsState.persons[2].age} />
    </div>
    );

    };



    export default app;

    //Person.js

    import React, { Component } from 'react';

    const person = (props) => {

    return (
    <h1>I'm a person.{props.children} {props.name}</h1>
    );

    };

    export default person;