Call a function in the functional component

Question

I need to call a function inside the functional component. Like this.

const title = {
    title1: ['Skills', [
        'JavaScript',
        'HTML',
    ]]
};
const cards = () => {
    const li = (title) => {
        title.map((liKey) => {
            return <li key={liKey}>{liKey}</li>
        })
    }

    return (
        <Row>
            <Col lg={4} xl={4}>
                <Card 
                    title1={title.title1[0]}
                    li1={li(title.title1[1])}
                />
            </Col>
        </Row>
    )
};

Output:

• JavaScript
• HTML

But, it shows empty instead of a list of item if I tried to use the li function.

However, it does work if I tried to put like the following.

const cards = () => {
    return (
        <Row>
            <Col lg={4} xl={4}>
                <Card 
                    title1={title.title1[0]}
                    li1={title.title1[1].map((liKey) => {
                       return <li key={liKey}>{liKey}</li>
                    }))}
                />
            </Col>
        </Row>
    )
};

Can anyone explain why? Thank you.

Answer 1

Add return statement inside li() :

const li = (title) => {
    return title.map((liKey) => {
        return <li key={liKey}>{liKey}</li>
    })
}

Or get rid of the curly braces altogether which implies a return:

const li = title => 
    title.map((liKey) => {
        return <li key={liKey}>{liKey}</li>
    })