Calling an External Function in a React Component

Question

I have a need, in a site I'm building, for a list component that is reused several times. However, the list is purely for rendering and is not responsible for the state of the app at all. I know you either cannot, or are not supposed to have dumb components containing any logic, but I am not sure how to proceed without using a smart component, which is entirely unnecessary. Here is my smart component that works:

class Menu extends Component {
    renderItems(items) {
        return this.props.items.map((i, index) => {
             return (
                 <li key={index} style={{marginLeft: 10}}>
                    {i}
                </li>
            )
        });
    }
    render() {
        const { listStyle } = styles;
        return (
            <div>
                <ul style={listStyle}>
                    {this.renderItems()}
                </ul>
            </div>
        )
    }
}

And I've tried this:

function Menu(props) {
    return props.items.map((i, index) => {
             <li key={index} style={{marginLeft: 10}}>
                {i}
            </li>
    });
}

And then calling it inside Nav like this, which does not throw an error but does not render anything from menu either:

const Nav = () => {
    const { listStyle, containerStyle } = styles;
    return (
        <div style={containerStyle}>
            <Logo url={'#'}
                    src={PickAPlayLogo}
                    width={300} />
            <Menu items={pageLinks} />
            <Menu items={socialMediaLinks} />
            <Logo url={'#'}
                    src={AppStoreLogo}
                    width={170} />
        </div>
    );
};

Also, worth noting, I have never come across a function that is supposed to be rendered like a component, but was trying it based on the example on this page

it should throw an error, try wrapping the Menu function body inside ul, like this: function Menu(Props){return <ul> { /*map logic*/ } </ul>}, btw this kind of functions are known as "Stateless Functional Component". Check DOC for more details. — Mayank Shukla
– Mayank Shukla, Commented Jan 7, 2018 at 4:50
Perhaps it's an issue with mapping? I tried this and still nothing renders and there's no error: function Menu(props) { return <ul> {props.items.map((i, index) => { <li key={index}> {i} </li> })} </ul> } — Jessie Richardson
– Jessie Richardson, Commented Jan 7, 2018 at 5:21
ohh really missed that part, you forgot to return inside map body, use return <li>....</li> or replace {} by () here: return props.items.map((i, index) => (<li>....</li>); Because you used block body of map so return will be required inside map body. — Mayank Shukla
– Mayank Shukla, Commented Jan 7, 2018 at 5:26

Paul Asetre · Accepted Answer · 2018-01-07 05:31:47Z

1

Heres an answer similar to what you have going on

function Menu(props) {
    this.renderItems = () => {
        return (
            <ul>
                {props.items.map((i, index) => {
                   return (
                       <li>{i}</li>
                   )
                })}
            </ul
        )
    }

    return(
        this.renderItems()
    )
}

answered Jan 7, 2018 at 5:31

Paul Asetre

816 bronze badges

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

Comments

Jessie Richardson · Accepted Answer · 2018-01-07 05:29:32Z

0

Here we go:

function Menu(props) {
    const {listStyle} = styles;
    const listItems = props.items.map((i, index) =>
                <li key={index} style={{marginLeft: 10}}>
                    {i}
                </li>
        );
    return (
        <ul style={listStyle}>{listItems}</ul>
    );
}

answered Jan 7, 2018 at 5:29

Jessie Richardson

9582 gold badges9 silver badges25 bronze badges

Collectives™ on Stack Overflow

Calling an External Function in a React Component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related