Context

[cmorbat]

` /App.js/ import React, { useState } from 'react'; import AppContext from './AppContext'; import Header from './Header' import Content from './Content'

function App() { const [language, setLanguage] = useState('es')

return (

setLanguage(language) }}>

); } export default App;

/AppContext.js/ import React from 'react'; export default React.createContext({language:'es', changeLanguage:()=>{}});

/Header.js/ import React, { useContext } from 'react' import AppContext from './AppContext'

export default props => { const context = useContext(AppContext) return (

context.changeLanguage(context.language === 'es' ? 'en': 'es')}> {context.language === 'es' ? 'Cambiar idioma' : 'Change language'}

)

}

/Content.js/ import React from 'react'; import ContentText from './ContentText' import ContentButton from './ContentButton'

function Content(){ return(

)

} export default Content;

/ ContentText.js/ import React from 'react'; import AppContext from './AppContext'

class ContentText extends React.Component{ static contextType = AppContext;

render(){
    return(
        <p>
            {this.context.language==='es' ? "Hola" : "Hello"}
        </p>
    )
}

} export default ContentText;

/ ContentButton.js/ import React, {useContext} from 'react'; import AppContext from './AppContext';

function ContentButton(){ const context = useContext(AppContext); return(

{context.language==='es' ? "Púlsame" : "Click me"}

)

} export default ContentButton; `