score:2

Accepted answer

The render method of your Journal component should be like:

render() {
    return (
        <div>
            {this.state.journalList.map((items) => {
                <JournalList key={items.title}
                             title={items.title} 
                             description={items.description}>
                </JournalList>
                       })                            
            }
        </div>            
    ) 
} 

And change the state declaration to:

this.state = {
        displayList: true,
        journalList: [],
        searchJournalList: []
    }

You've reversed the order of the things. The map() should wrap the component <JournalList>, instead of the <JournalList> wrap the journalList.map(). Because the map will iterate through the journalList and create each component.

EDIT:

Your JournalList component is "unuseful". It is creating multiple lists, but you only needs one. Change your <JournalList> to this:

import PropTypes from "prop-types";
import React from "react";
import {Components} from "reusable-web-components";
import store from "store"

const {
    Icon,
    List
} = Components;

const JournalList = (props) => {
    state = {
       journalList: []
    }
    componentDidMount = () => {
        store.dispatch(api.getJournals()).then((result) => {
            var formattedItems = result.body.data.map( data => {
              title: data.title,
              description: data.description,
                 actions: [
                    {
                       label: <Icon name="edit" />,
                       action: () => {}
                    },
                    {
                       label: <Icon name="delete" />,
                       action: () => {}
                    }
                 ] 
              }) // End of the map
            this.setState(() => ({"journalList": formattedItems}));
        }).
            catch(() => {
                this.setState(() => ({"journalList": []}));
            });
    }
    render(){
       return(
          <List items={this.state.journalList} searchable={["title"]} />
       )
    }
}

export default JournalList;

Doing this, you JournalList component will be useful, and you won't need the <Journal> Component.


Related Query

More Query from same tag