Context in "stateless" component? - reactjs

Question

I have the following code in a component and I would like a stateless component to access this part of code:
Main component:
function createApp(store, communityIds) {
const App = React.createClass({
childContextTypes: {
localizedString: React.PropTypes.func,
},
getChildContext: function() {
return {
localizedString: function(key, fallback) {
return getKey(key, fallback);
},
};
},
render: function() {
return (
<Provider store={store}>
<Client communityIds={communityIds}/>
</Provider>
);
},
});
return <App/>;
}
Stateless:
export default () => (dispatch, getState) => {
const state = getState();
const token = state.user.get('token');
if (!token) {
throw new Error('test'); // this.context.localizedString does not work
}
}

Answer 1

What you have provided under your definition of "Stateless:" function is not what a Stateless function is. You have provided your action creator as a thunk. I assume you wanted to insert the code for your Client component instead. To access context in a stateless component, your Client component would do something like this (which is documented here)
const Client = (props, context) => {
return <div >{context.localizedString("someKey", "someFallback")} </div>
}
Client.contextTypes = {
localizedString: React.PropTypes.func
}
export default Client

Answer 2

I had the same question. The modern way (in 2019) is to use hook useContext(contextName). Docs: https://reactjs.org/docs/hooks-reference.html#usecontext
const dumbComp = (props) => {
const context = useContext(contextName);
return(
<div>
...
</div>
);
}

Answer 3

Use second parameter of stateless component
const MyStatelessComponent = (props, context) => {
const onGoButtonClick = () => {
context.router.push('https://www.google.co.in');
};
return(
<div>
<button onClick={() => onButtonClick()}>
{props.buttonName}
</button>
</div>
);
}
MyStatelessComponent.propTypes = {
buttonName: PropTypes.string.isRequired,
};
MyStatelessComponent.contextTypes = {
router: React.PropTypes.object.isRequired,
};
export default MyStatelessComponent;

Answer 4

Another solution is a self invoking function:
export default (Component=>(
Component.contextTypes = {
localizedString: React.PropTypes.func
}) && Component
)((props, context)=>{
return <div>{context.localizedString("someKey", "someFallback")}</div>
})
Or if you define the contextTypes separately to reuse it, you could do:
//addContextTypes.js
export default function(Component){
return (Component.contextTypes = {
localizedString: React.PropTypes.func
}) && Component
}
//component.jsx
import addContextTypes from './addContextTypes'
export default addContextTypes((props, context)=>{
return <div>{context.localizedString("someKey", "someFallback")}</div>
})

Answer 5

I had the same question, but was on Expo SDK 32, meaning I don't have access to hooks.
Here's how I achieved it:
import { reduxForm } from 'redux-form'
import { ReduxFormContext } from 'redux-form/lib/ReduxFormContext'
const ShowFormName = () => (
<ReduxFormContext.Consumer>
{
({ form }) => <Text>{form}</Text>
}
</ReduxFormContext.Consumer>
)
export default reduxForm({ form: 'formName' })(ShowFormName)