Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Text not displaying when being mapped from Array in react

Used a mapping function to display information from an array into 3 tiers, from what I can see everything seems right but none of the information is being displayed, can someone look at the code and tell me if there is something that I am missing

import React from 'react'
import styled from 'styled-components'

function Plans() {

    const notePlans = [
    {
        name:"NoteZ Free",
        price:"$0",
        features: [
            "1 user per account",
            "Unlimited notes",
            "4 categories to choose from",
            "Help Support"
            ]
    },
    {
        name:"NoteZ +",
        price:"$5",
        features: [
            "2-4 users per account",
            "Unlimited notes",
            "Folder system for notes",
            "Custom categories",
            "Custom templates to choose from",
            "Help Support"
        ]
    },
    {
        name:"NoteZ Infinity",
        price:"$10",
        features: [
            "Unlimited users per account",
            "Unlimited notes",
            "Folder system for notes",
            "Custom categories",
            "Full integration with MealZ",
            "Full integration with WorkoutZ",
            "Custom templates to choose from",
            "Help Support"
        ]
    }
    ]

  return (
    <Main>
        <div className='pricing-container'>
            {notePlans.map((plan) => (
                <div className='pricing-card' key={plan.name}>
                    <h2>{plan.name}</h2>
                    <p>{plan.price}</p>
                    <ul>
                        {plan.features.map((feature,index) => (
                            <li key={index}>{feature}</li>
                        ))}
                    </ul>
                    <button>Buy Now</button>
                </div>
            ))}
        </div>
    </Main>
  )
}

const Main = styled.div`
    width:100%;

    .pricing-container{
        border:1px solid black;
        color black;
        
    }
`;



export default Plans

I tried adding the key when the console reported an error saying that a key was needed.

Tags:

2

Answers


  1. 0

    Try this:

    const Main = styled.div`
    width:100%;

    .pricing-container{
        border:1px solid black;
        color: black;
        
    }
`;

    There was a missing ":", after color.
    Also it works here: https://codesandbox.io/s/agitated-jepsen-5zdl2y?file=/src/App.js

    Login or Signup to reply.
  2. 0

    Try adding return statement in your map callback function like this :

    <div className='pricing-container'>
        {notePlans.map((plan) => 
            return (
            <div className='pricing-card' key={plan.name}>
                <h2>{plan.name}</h2>
                <p>{plan.price}</p>
                <ul>
                    {plan.features.map((feature,index) => (
                        <li key={index}>{feature}</li>
                    ))}
                </ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search