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
  • Save SubhashiniSundaresan/72310947bd873b86978d3a98f6d50030 to your computer and use it in GitHub Desktop.
Save SubhashiniSundaresan/72310947bd873b86978d3a98f6d50030 to your computer and use it in GitHub Desktop.
Download ZIP
React
Raw
adding css
// 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;
}
Raw
gistfile1.txt
//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
Raw
Handling Dynamic Content "The JavaScript Way"
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;
Raw
List & keys
https://github.com/chesterheng/cheatsheet/blob/3fd1f64366f7720fb202f47e7ac3e66697230d72/React/04_Working_with_Lists_and_Conditionals.md
Raw
onclick
//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;
Raw
Radium - CSS
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);
//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);
Raw
Render Conditionally
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;
Raw
two way binding
// 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;
Raw
useState
//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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment