Reactjs Component Composition

Question

Here I'm trying to use the el data inside the Composition Component.I'm trying like this :

const Game = ["Cricket", "Football", "Badminton"];
    const Test = (props) => {
      return (
        <div>
          <ul>
            {Game.map((el) => (
              <li key={Math.random()}>
                <span>{el}</span>
                {props.children}
              </li>
            ))}
          </ul>
        </div>
      );
    };
    
    const Composition = () => {
      return (
        <Test>
          <div>{el}</div>
        </Test>
      );
    };

export default Composition

But it's give me an error. I can't understand how to do this. Is there any way to get the el data inside Composition Component from Test Component ? here is my app.js file :

import { Fragment } from "react";
import Composition from "./Components/Header/Composition";

export default function App() {
  return (
    <Fragment>
      <Composition></Composition>
    </Fragment>
  );
}

Working example:

const Game = ["Cricket", "Football", "Badminton"];
    
const Test = (props) => {
      return (
        <div>
          <ul>
            {Game.map((el) => (
              <li key={Math.random()}>
                <span>{el}</span>
                {props.children({ el })}
              </li>
            ))}
          </ul>
        </div>
      );
    };

const MyDiv = ({ el }) => {
  return <div>{el}</div>
}
    
const Composition = () => {
  return (
    <Test>
      {({ el }) => <MyDiv el={el} />}
    </Test>
  );
};

ReactDOM.render(
  <Composition />,
  document.querySelector('body')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

You could just use other prop than children and pass the data as props. — Konrad, Aug 08 '22 at 06:43
you mean like ` {props.el}` in Test Component ? But in Composition Component how can i access this el data? could you please elaborate this with code? — Nasim_Reja, Aug 08 '22 at 06:49
I deleted my answer because I misunderstood your question. The thing you are trying to do is impossible — Konrad, Aug 08 '22 at 07:15
Does this answer your question? [How to pass props to {this.props.children}](https://stackoverflow.com/questions/32370994/how-to-pass-props-to-this-props-children) — Fraction, Aug 08 '22 at 07:54
no. it's impossible I thought so. I need to implement other way. However thanks for everything — Nasim_Reja, Aug 08 '22 at 08:07
Why is this impossible ? I have temporary added a working example to your post — Fraction, Aug 08 '22 at 08:19

score 0 · Answer 1 · answered Aug 08 '22 at 06:53

First you nedd to update your Test component like this,

    import React from 'react';
    
    const games = [
      { id: 1, value: 'Cricket' },
      { id: 2, value: 'Football' },
      { id: 3, value: 'Badminton' },
    ];
    
    function Test() {
      return (
        <div>
          <ul>
            {games.map((el) => (
              <li key={el.id}>
                <span>{el.value}</span>
              </li>
            ))}
          </ul>
        </div>
      );
    }
    
       const Composition = () => {
      return (
        <Test />
      );
    };

export default Composition

And your Composition nee to updated lie this,

import Composition from "./Components/Header/Composition";

export default function App() {
  return (
    <>
      <Composition />
    </>
  );
}

this will fix your issue.

You can use id parameter for not to generating random numbers. And you can use <>> tag for Fragment for effienty.And you dont need el params in the Composition component its already rendered in Test component — Furkan Gökmen, Aug 08 '22 at 06:56
I am creating an e-commerce application. when I created the header element, a situation created where i need to use the **el** parameter in the children component similarly , I have mentioned in this question. I want to apply exact this approach if i add id in my array then I have to change many things in my application that is painful — Nasim_Reja, Aug 08 '22 at 08:33

Reactjs Component Composition

1 Answers1