React children return undefined when putting them inside divs

Question

I've been coding a columns component which creates a base div, and inside, you place every children you want. The component takes every single child inside the columns div and place them in another div. No need to create columns inside. The problem is that once I go through all the children and create the element, the functions returns me undefined.

React code

import React from 'react';
import './columns.css';

export const Columns = ({
    children,
    columnsClass
}) => {
    
    const checkClasses = () => {
        if(columnsClass){ return columnsClass; }
    }

    const getChildren = () => {
        children.map((child, index) => {
            return React.createElement(child.type, {key: index, className: `app-column app-column-${index = index + 1}`}, child.props.children);
        })
    }

    return (<div className={`app-columns ${checkClasses()}`}>{getChildren()}</div>);
}

Children console.log

Object { "$$typeof": Symbol("react.element"), type: "div", key: null, ref: null, props: {…}, 
_owner: {…}, _store: {…}, … }
"$$typeof": Symbol("react.element")
_owner: Object { tag: 0, key: null, index: 0, … }
_self: undefined
_source: Object { fileName: "C:\\wamp64\\www\\Proyectos\\Portfolio\\src\\routes\\home.js", lineNumber: 52, columnNumber: 17 }
_store: Object { … }
key: null
props: Object { children: "Columna 5" }
ref: null
type: "div"

Updated code | Solution

import React from 'react';
import './columns.css';

export const Columns = ({
    children,
    columnsClass
}) => {
    
    const checkClasses = () => {
        if(columnsClass){ return columnsClass; }
    }

    return (<div className={`app-columns ${checkClasses()}`}>
        {
            children.map((child, index) => {
                return React.createElement(child.type, {key: index, className: `app-column app-column-${index = index + 1}`}, child.props.children);
            })
        }
    </div>);
}

Does this answer your question? [JavaScript: Difference between .forEach() and .map()](https://stackoverflow.com/questions/34426458/javascript-difference-between-foreach-and-map) — Brian Thompson, Apr 05 '22 at 13:29
You're also not returning anything. In `forEach` returns don't make sense because it won't do anything with the result. In `map`, you must return the elements. — Brian Thompson, Apr 05 '22 at 13:37
As @BrianThompson notes, the `.map()` needs to `return`. Try this: `const getChildren = () => { return children.map(`. Or, this: `const getChildren = () => ( children.map(` .. the closing `}` should also be changed to: `)`. — jsN00b, Apr 05 '22 at 13:47

score 0 · Answer 1 · answered Apr 05 '22 at 13:57

You need to change

const getChildren = () => {
        children.map((child, index) => {
            return React.createElement(child.type, {key: index, className: `app-column app-column-${index = index + 1}`}, child.props.children);
        })
    }

with this

const getChildren = () => {
        return children.map((child, index) => {
            return React.createElement(child.type, {key: index, className: `app-column app-column-${index = index + 1}`}, child.props.children);
        })
    }

You was getting the problem because your function was not returning anything therefore nothing got displayed.

React children return undefined when putting them inside divs

1 Answers1