Context in "stateless" component?

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 (
            
                
            
        );
    },
});

return ;
}

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
    }
}

user_10303580 · Answer

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(
             
             ...
          
       );
    }

user_1149933 · Answer

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 = () => (
  
    {
      ({ form }) => {form}
    }
  
)

export default reduxForm({ form: 'formName' })(ShowFormName)

Context in "stateless" component?

5 Answers