Skip to content

Instantly share code, notes, and snippets.

🎯
Focusing

Ufuk Canlı ufukcanli

🎯
Focusing
Block or report user

Report or block ufukcanli

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@ufukcanli
ufukcanli / context.js
Last active Apr 26, 2019
Creating provider class
View context.js
export class Provider extends Component {
state = {
name: 'Ufuk',
age: 22,
};
render() {
return (
<Context.Provider value={{
state: this.state
}}>
@ufukcanli
ufukcanli / context.js
Created Apr 26, 2019
Creating a context
View context.js
export const Context = React.createContext();
@ufukcanli
ufukcanli / Parent.js
Created Apr 26, 2019
Creating the main component
View Parent.js
export default class Parent extends Component {
render() {
return (
<Provider>
<Child />
</Provider>
);
}
}
@ufukcanli
ufukcanli / Child.js
Created Apr 26, 2019
Creating the Child component
View Child.js
export default class Child extends Component {
render() {
return (
<Context.Consumer>
{value => (
<div>
<h1>{value.state.name}</h1>
<p>{value.state.age}</p>
</div>
)}
@ufukcanli
ufukcanli / Child.js
Created Apr 26, 2019
Updating Child component
View Child.js
export default class Child extends Component {
render() {
return (
<Context.Consumer>
{value => (
<div>
<h1>{value.state.name}</h1>
<p>{value.state.age}</p>
<button onClick={value.incrementAge}>Increment</button>
</div>
@ufukcanli
ufukcanli / context.js
Last active May 9, 2019
Passing event listener
View context.js
export class Provider extends Component {
state = {
name: 'Ufuk',
age: 22,
};
incrementAge = () => {
this.setState({
age: this.state.age + 1
})
You can’t perform that action at this time.