The same component render two times

Question

I want render the same component instance of <Child /> two times in <Parent /> component.

index.js

import React from 'react';
import { render } from 'react-dom';

import Parent from './Parent';

render(
  <Parent />,
  document.getElementById('root')
);

Parent.js

import React from 'react';
import Child from './Child';

const child = <Child />

export default () => {
  return (
    <>
      {child}
      {child}
    </>
  )
}

Child.js

import React, { useState } from 'react';

function generateRandomString() {
  return Math.random().toString();
}

export default () => {
  const [text, setText] = useState(generateRandomString());

  function onClickHandler() {
    setText(generateRandomString());
  }

  return (
    <div onClick={onClickHandler}>text: {text}</div>
  )
}

Is it possible to do?

Answer 1

You are treating component as value. Just change your parent.js as follow.

import React from 'react';
import Child from './Child';
export default () => {
  return (
    <div>
     <Child/>
     <Child/>
    <div/>
 )
}