- The simplest way to test Context API is through Hello World.
- This app uses context API to store an object of messages and a function to switch between messages.
- The context consists of an object called
message
and a function 'toggleMessage'.
import React from 'react'
// An object called messages
export const messages = {
message1: {
firstWord: 'hello',
secondWord: 'world'
},
message2: {
firstWord: 'hi',
secondWord: 'everyone'
}
}
// The HelloContext itself
// - this needs to match the Consumer props
export const HelloContext = React.createContext({
message: messages.message1, // Message Object
toggleMessage: () => {}, // Empty Function
})
- The consumer will be my Message component.
- The Message component will display a message and a button which changes the message.
import React from 'react'
import { HelloContext } from '../contexts/hello-context';
const Message = () => {
return (
<HelloContext.Consumer>
{
({message, toggleMessage}) => (
<header className="App-header">
<h1 className="App-title">{ message.firstWord + ' ' + message.secondWord }</h1>
<button onClick={ toggleMessage }>Change Message</button>
</header>
)
}
</HelloContext.Consumer>
)
}
export default Message
- The provider will be contained in my App component and its value will equal the
state
. - My state will be initialised to:
- message: The first message in my message object
- toggleMessage: The function that will change the message from 'hello world' to 'hi everyone'
import React, { Component } from 'react'
// import logo from '../assets/images/logo.svg'
import '../styles/App.css'
import { HelloContext, messages } from '../contexts/hello-context'
import Message from './Message'
class App extends Component {
// This function strictly needs to be declared before initialising the state
_toggleMessage = () => {
console.log('Test')
this.setState(prevState => ({
message:
prevState.message === messages.message1
? messages.message2
: messages.message1
}))
}
state = {
message: messages.message1,
toggleMessage: this._toggleMessage,
}
render() {
return (
<HelloContext.Provider value={ this.state }>
<div className="App">
<Message />
</div>
</HelloContext.Provider>
)
}
}
export default App
- Added Button Context - Context that specifies the Title of a Button.
- Added Action Context - Context that provides sync and async actions to display the message as an alert.
This project was bootstrapped with Create React App.