trying to turn an array into a list

Question

you probably should use jsx instead of manipulating the dom directly:

function makeList(array) {
    return (
        <ul>
            (array.map((value, index) => (<li>{value}</li>)
        </ul>
    )
}

or a full, more optimal, solution would be to create a Breakfast component:

class Stuff extends Component {
    constructor(props) {
        super(props);

        this.source = {
            breakfast: [
                {
                    id: 1,
                    name: "eggs",
                    img: image1,
                    description: "Start a day with delicious and nutricious eggs!",
                    ingridients: ['2 eggs', 'two slices of toast', 'bacon', 'butter']
                },
            ]
        }

    }

    render() {
        return (
            <div>
                <Day source={this.source}></Day>
            </div>
        );
    }
}

class Day extends Component {
    render() {
        return (
            <div className="displayOne">
                {this.props.source.breakfast.map((breakfast) => <Breakfast breakfast={breakfast}/>)}
            </div>
        );
    }
}

function Breakfast({breakfast}) {
    return (
        <div className="displayOne">
            <img src={breakfast.img} alt="eggs"/>
            <h3>{breakfast.description}</h3>
            <ul>
                {breakfast.ingridients.map((ingridient) => <li>{ingridient}</li>)}
            </ul>
        </div>
    )
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

In generall, if you haven’t done already. I would advice you to go through the “Getting Started” guide of React to understand the “way of react”. Here is the official “Intro to React”: https://reactjs.org/tutorial/tutorial.html

Leave a Comment Cancel Reply