Commit 768cf57a authored by Adrian's avatar Adrian

Version 1 del context api

parent 5b1b1bcf
Pipeline #327 failed with stages
.App {
body {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
.root {
height: 100vh;
background: #333;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
.parent {
background: #aaa;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
flex-direction: row;
align-items: flex-start;
justify-content: space-evenly;
}
.App-link {
color: #61dafb;
.cmpA {
width: 40%;
height: 250px;
background-color: blue;
margin: 10px 0;
margin: 50px 0;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.cmpB {
width: 40%;
height: 250px;
background-color: red;
margin: 50px 0;
}
\ No newline at end of file
import logo from './logo.svg';
import './App.css';
import ParentCmp from './components/parentComponent';
import { CounterProvider } from './context/context';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<div className="root">
<CounterProvider>
<ParentCmp />
</CounterProvider>
</div>
);
}
......
import React, { useContext } from 'react';
import '../App.css'
import { CounterContext } from '../context/context'
const CmpA = props => {
const { increment, decrement } = useContext(CounterContext);
return (
<div className="cmpA">
<h1>A</h1>
<input type="button" onClick={increment} value="Incrememnt" />
<input type="button" onClick={decrement} value="Decrement" />
</div>
);
}
export default CmpA;
\ No newline at end of file
import React, { useContext } from 'react';
import '../App.css'
import { CounterContext } from '../context/context'
const CmpB = props => {
const { value } = useContext(CounterContext);
return (
<div className="cmpB" >
<h1>B</h1>
<h2>Counter: {value}</h2>
</div>
);
}
export default CmpB;
\ No newline at end of file
import React from 'react';
import CmpA from './componentA'
import CmpB from './componentB'
const Parent = props => {
return (
<div className="parent">
<CmpA />
<CmpB />
</div>
);
}
export default Parent;
\ No newline at end of file
import React, { createContext, } from 'react';
export const CounterContext = React.createContext();
export const CounterProvider = ({ children }) => {
const [counter, setCounter] = React.useState(0);
const add = () => {
setCounter(counter + 1);
}
const sub = () => {
setCounter(counter - 1);
}
return (
<CounterContext.Provider value={{ value: counter, increment: add, decrement: sub }} >
{children}
</CounterContext.Provider>
)
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment