Dynamically creating array of components

Question

I've followed this tutorial but the requirement is a bit different. I've a function getArrayList that should generate an array of ItemComponent. The returned component will receive the items prop that is an array.

function getArrayList(ItemComponent) {
    return null // return a new component that renders an array of ItemComponent 
}

class Link extends React.Component {
    render() {
        return <a href={ this.props.item.href }>{ this.props.item.text }</a>;
    }
}

const LinkList = getArrayList(Link);

document.body.innerHTML = "<div id='root'></div>";
const rootElement = document.getElementById("root");

if(LinkList) {
    let items = [
        { href:"https://www.yahoo.com", text:"Yahoo" },
        { href:"https://www.bing.com", text:"Bing" }
    ];
    ReactDOM.render(<LinkList items={items} />, rootElement);
    console.log(rootElement.innerHTML);
}

how to implement getArrayList that returns an array of components that will receive items (links) as an array and populate list of links, it's like a list wrapper module — AppDeveloper
– AppDeveloper, Commented Jul 26, 2020 at 9:07

thedude · Accepted Answer · 2020-07-26 09:11:48Z

2

You can do something like this

const getArrayList = (ItemComponent) => {
    const ListComponent = ({items}) => {
        return <div>{items.map(item => <ItemComponent item={item} />)}</div>
    }   
    return ListComponent
}

answered Jul 26, 2020 at 9:11

thedude

9,8371 gold badge34 silver badges33 bronze badges

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

2 Comments

AppDeveloper Over a year ago

is ListComponent a React component? it has to be a component, it's the assignment requirement actually, it works though but somehow I've to meet the specs, I guess something like dynamic component? The component will receive items prop, like this.props

thedude Over a year ago

ListComonent is a functional React component

Dima G · Accepted Answer · 2020-07-26 09:19:39Z

0

You could do something like this:

const LinkList = (items) => (
    <div>
    {items.map(i => (
        <Link key={i.href} item={i}/> // pass the item as props ...
    ))}
    </div>
);

Note: react asks for key property when you dynamically create a list of components.

answered Jul 26, 2020 at 9:19

Dima G

2,04520 silver badges22 bronze badges

Collectives™ on Stack Overflow

Dynamically creating array of components

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related