Questions tagged [clone-element]

10 questions
5
votes
1 answer

pass ref to a class component with React.cloneElement and render prop

I'm writing a component that handle some internal state according to a ref of it's child (a mouse event related to that child's ref for example). This component is using a render-prop to pass on the relevant piece of state to it's child, and render…
swing_js
  • 141
  • 1
  • 8
3
votes
2 answers

React cloneElement is not working for functional component

I would like to add some props to my component using {React.cloneElement(, { onClick: () => console.log('click'), style: {background: 'red'} })} Full code: const MyComponent = () => { return (
foooo
masiyik879
  • 341
  • 4
  • 10
1
vote
0 answers

React.cloneElement: distinguish element from its clone

After const element = const cloned = React.cloneElement(element, someProps) both an element and its clone are rendered. (The original element is rendered into a portal.) Now I need to attach a ref to cloned but not element. I believe I…
bebbi
  • 2,489
  • 3
  • 22
  • 36
1
vote
0 answers

React.cloneElement returning double elements when trying to validate a child element

I'm trying to pass props from Parent ("Section") element to all Children elements while trying to make sure that only "Block" elements can be used as children. It works fine when I use React.cloneElement the following way: const Blocks =…
Da Moose
  • 111
  • 1
  • 14
0
votes
1 answer

React Three Fiber Outline only selected model from an objectArray of meshes

I'm working on a R3F project with quite a bunch of models that are accessed through an object array. I want to highlight the currently selected model through the postprocessing EffectComposer, but that seems not to work since I load my models…
0
votes
0 answers

React.cloneElement with deeply nested component

it's very complicated to explain the whole use-case here because I have deeply nested component, but I will try to show the concept. How to display age from parent in OneMoreNestedChild without ContextApi, is it possible in the following example…
Mile Mijatović
  • 2,948
  • 2
  • 22
  • 41
0
votes
2 answers

Adding a prop to previously defined component using React.cloneElement error cannot read properties of undefined

I have a component defined as Attack in a file named dice.js. In some instances I want a specific prop (m) to be filled out automatically dice.js ... export function Attack({ n, h, d, m = '' }) { return (
foob, {`${n} ${h} ${d}…
iamgarrett
  • 49
  • 1
  • 7
0
votes
1 answer

Using React.clone element vs not using it for applying a prop

i saw a code snippet which write this: {React.Children.map(children, (child, index) =>
{child}
)}
but i was wondering why it was not…
RamAlx
  • 6,976
  • 23
  • 58
  • 106
0
votes
1 answer

Clone Element in ReactJS

I would like to copy an element with a specific reference, is it possible to do it? CODESANDBOX: https://codesandbox.io/s/new?file=/src/App.js:0-463 import "./styles.css"; import React, { useRef } from "react" export default function App() { …
JGPcode
  • 167
  • 1
  • 4
  • 13
0
votes
0 answers

State change in parent component is not reflecting for child component in React

I'm using Sample tabs component in React as follows: Sam import React from 'react'; import ReactDOM from 'react-dom'; import Tabs from 'xxx/components/tabs'; import Tab from 'xxx/components/tab'; import TabHeader from…
Akhilesh Kumar
  • 9,085
  • 13
  • 57
  • 95