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>;
}
Source: stackoverflow.com
Related Query
- How can I render different data from a single react component?
- How to delete single item from realtime Firebase in react app?
- How to iterate and extract single objects from an array of objects to render in React
- How do I render a single Item fetched from the API ReactJS
- How to render single field from firestore document with React
- How can I render HTML from another file in a React component?
- How do I render Markdown from a React component?
- React JSX, how to render text with a single quote? Example <p>I've</p>
- How to get the data from React Context Consumer outside the render
- How to pass the match when using render in Route component from react router (v4)
- React JS: how to properly remove an item from this.state.data where data is an array of objects
- How do I render a string as children in a React component?
- How do I get acces to only one item from map method in react js
- How to render a react component from a string name
- How to remove caret from dropdown nav item in React Bootstrap
- How to target single item in list with onClick when mapping JSON array in React
- How to stop onDragLeave from firing when moving from container to children in React
- How to render data received from a REST service in React Universal? (Next.js)
- reactjs - Render single icon on hover for list item rendered from array
- How do i use a single render across multiple tests in React Testing Library.?
- How to call multiple graphql mutation from a single react component?
- How to Read image data from API and render in React Component
- How to make my component re render after updating props from selector in react and redux-saga?
- React How to render nested dropdown list in a form from a json data?
- how to pass the current item to the function so that i can remove it from array in react component?
- Render item from an array after a fixed interval in React
- How to render Draft-js text in React from server
- How to add & remove item from reducer state in react
- How do i render multiple props in a single component and then pass those props to a child component in React
- How to render custom elements for each item in an object (Map data structure) in React TS?
More Query from same tag
- Is There a Syntax to Remove the First Parameter from a map() Arrow Function?
- Grid Layout of View in React Native
- React: trigger onChange and update select element if input value is changed by state
- Is passing the _setTitle method with the props the way to go?
- Display input box if selecting a specific radio button
- when i run "npm run dist_win", get a error: "node_modules" Not an internal or external command?
- react-router-v4 NavLink not rerendering components
- How do I load firebase data into react-redux asynchronously?
- Flowtype spread operator not working
- How can I access a variable outside of a function in ReactNative?
- How to avoid repeatedly instantiating an object
- React-native and React
- React Routing: Detect route change
- Can I define and use a CSS at-rule in react.js component?
- React state doesn't update immediately with useState
- craco causes yarn build to fail due to "Cannot find module 'environment'. TS2307"
- How do I add airbnb react-dates to my HTML page?
- handleSubmit not getting called
- React: unique "key" prop
- How can I solve "cannot find module" when npm test
- Hiding parent react component, when you click on a child component
- React/Redux - dispatch action on app load/init
- Cleanup format in React file with VS Code
- mutate state property error still exists after using setState()
- Add a child to tree with useState
- "Only one instance of babel-polyfill is allowed" error
- react-router and express child routes not triggering
- How to make ajax call auto refresh in react js
- Multiple Dropdown in reactjs
- React Checkbox default value to true