Rendering HTML from map function in React Context API render function

Question

I'm trying to render out a list of titles by calling map on state from inside the <MyContext.Consumer> component but the code is not returning the list items. However, if I do a console.log(dataImTryingToMap); it shows exactly what I'm trying to render. The <ul> is rendered but no <li>'s are. There are no errors thrown by create-react-app. What am I missing??? Here is the consumer component:

<MyContext.Consumer>
    {context => (
        <ul>
            {Object.keys(context.state.subjects).map(subject => {
                <li>{context.state.subjects[subject].title}</li>;
                console.log(context.state.subjects[subject].title);
             })}
        </ul>
    )}
</MyContext.Consumer>

The console log returns exactly the data I'm looking for, but nothing shows on the screen.

And here is the state from the <MyContext.MyProvider> component:

state = {
    subjects: {
        subject0: {
            title: "Math",
            description: "",
            cards: {
                card1: {
                    note: "",
                    answer: ""
                }
            }
        },
        subject1: {
            title: "history",
            description: "",
            cards: {
                card1: {
                    note: "",
                    answer: ""
                }
            }
        }
    }
};

Thanks for any help!

Ori Drori · Accepted Answer · 2018-07-13 08:02:03Z

2

You are not returning anything from the Array.map() callback:

{Object.keys(context.state.subjects).map(subject => {
    <li>{context.state.subjects[subject].title}</li>; <-- this is not returned
    console.log(context.state.subjects[subject].title);
 })}

const contextValue = { state: {"subjects":{"subject0":{"title":"Math","description":"","cards":{"card1":{"note":"","answer":""}}},"subject1":{"title":"history","description":"","cards":{"card1":{"note":"","answer":""}}}}}};


const MyContext = React.createContext();

const Example = () => (
  <MyContext.Consumer>
  {context => (
    <ul>
    {Object.keys(context.state.subjects).map(subject => {
      console.log(context.state.subjects[subject].title);
      return (
        <li key={subject}>{context.state.subjects[subject].title}</li>
      );
     })}
    </ul>
  )}
  </MyContext.Consumer>
);

const Demo = ({ value }) => (
  <MyContext.Provider value={value}>
    <Example />
  </MyContext.Provider>
);

ReactDOM.render(
  <Demo value={contextValue} />,
  demo
);

<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="demo">
  </demo>

answered Jul 13, 2018 at 8:02

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Timothy Wilburn Over a year ago

the implicit return or adding "return" keyword doesn't change anything (i'll update my code, I was implicitly returning the <li> before posting).

Timothy Wilburn Over a year ago

on inspecting the page, the <MyContext.Consumer> element, along with the <ul> inside of it is rendered, but no <li>'s

Ori Drori Over a year ago

The demo is working, as you can see. So, find the differences between the demo and your code.

Timothy Wilburn Over a year ago

In a test, I do get the data I want rendered if I write in the consumer component: <p>{context.state.subjects.subject0.title}</p> renders "Math" to the page

Timothy Wilburn Over a year ago

yes yes yes, in doing more testing I had changed the 'map' to a 'forEach' and forgotten to change it back. too many late nights coding....Thank you!

|

Shubham Khatri · Accepted Answer · 2018-07-13 08:02:19Z

0

You haven't returned anything from inside the map function and hence it doesn't render anything. Either return it explicitly like

<MyContext.Consumer>
    {context => (
        <ul>
            {Object.keys(context.state.subjects).map(subject => {
                return <li>{context.state.subjects[subject].title}</li>;
             })}
        </ul>
    )}
</MyContext.Consumer>

or implicitly like

<MyContext.Consumer>
    {context => (
        <ul>
            {Object.keys(context.state.subjects).map(subject => (
                 <li>{context.state.subjects[subject].title}</li>;
            ))}
        </ul>
    )}
</MyContext.Consumer>

answered Jul 13, 2018 at 8:02

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

1 Comment

Timothy Wilburn Over a year ago

the implicit return or adding "return" keyword doesn't change anything (i'll update my code, I was implicitly returning the <li> before posting.

Collectives™ on Stack Overflow

Rendering HTML from map function in React Context API render function

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related