is manually setting props of a component returned by a render prop considered bad practice?

let's say i have this component:
function Foo(props: {renderSomething: (param: any) => VNode}) {
const rendered = props.renderSomething("hi theo");
return (<>
{rendered}
</>)
}
function Foo(props: {renderSomething: (param: any) => VNode}) {
const rendered = props.renderSomething("hi theo");
return (<>
{rendered}
</>)
}
if i were to set one of rendered's props before returning from Foo like this:
rendered.props.bar = "bazzz"
rendered.props.bar = "bazzz"
would that be considered bad practice?
Solution:
```tsx function Foo(props: {renderSomething: (param: any) => VNode}) { const rendered = props.renderSomething("hi theo"); const derivedSomething = useMemo(() => { return {...rendered, someProp: 2}...
Jump to solution
6 Replies
Neto
Neto5mo ago
yes and no why after calling renderSomething you would need to change the result manually but should work regardless
.❀ tablet ❀.
.❀ tablet ❀.OP5mo ago
two words: bad architecture
Neto
Neto5mo ago
derive it mutating a prop is bad bad bad
.❀ tablet ❀.
.❀ tablet ❀.OP5mo ago
now that i think of it, i should use a context instead of "injecting" props posthumously
Neto
Neto5mo ago
use a useMemo
Solution
Neto
Neto5mo ago
function Foo(props: {renderSomething: (param: any) => VNode}) {
const rendered = props.renderSomething("hi theo");
const derivedSomething = useMemo(() => {
return {...rendered, someProp: 2}
}, [rendered])

return (
<>
{rendered}
</>
)
}
function Foo(props: {renderSomething: (param: any) => VNode}) {
const rendered = props.renderSomething("hi theo");
const derivedSomething = useMemo(() => {
return {...rendered, someProp: 2}
}, [rendered])

return (
<>
{rendered}
</>
)
}
Want results from more Discord servers?
Add your server