score:1

Accepted answer

you should not return in a foreach in the first place. use filter or map to do the things you need.

const result = childrenwithprops.filter((child) => {
   return (child.props && child.props.for === "create");
}
return result[0] || null;

score:0

i managed to get this working using array.prototype.filter in the end as follows...

renderedit(object, oncancelclickcallback, onsubmitsuccesscallback) {
    const childrenwithprops = react.children.map(this.props.children, (child) => 
        react.cloneelement(child, {
            stop: object,
            onchange: this.onchange,
            onsubmit: this.onsubmit,
            oncancel: oncancelclickcallback,
            onsubmitsuccess: onsubmitsuccesscallback
        })
    );

    return <div>{childrenwithprops.filter((child) => child.props.for == "create")}</div>;
}

so i got an array with a single item in it. this seems a bit shonky though - better answers welcome!

score:0

class instance method:

getchildcomponents(children) {
    return children.length > 1 ? (
        children.map((child, index) => (
            <childcomponent key={`child-component-${index}`}>
                {child}
            </childcomponent>
        ))
    ) : (
        <childcomponent>{children}</childcomponent>
    );
}

component render function:

render() {
    const children = this.props.children;
    return <div>{children && this.getchildcomponents(children)}</div>;
}

Related Query

More Query from same tag