react slot component with args

how to pass args to react props child component

https://codesandbox.io/s/react-slot-component-with-args-n11d1

OK

https://codesandbox.io/s/react-slot-component-with-args-idhib

function component, pass slot child component as Function props

import React from "react";

import ReactDOM from "react-dom";

import "./styles.css";

import FunnelChart from "./FunnelChart";

import Slot from "./Slot";

function App() {

  return (

    <div className="App">

      <FunnelChart title="xgqfrms">

        <Slot />

      </FunnelChart>

      <hr />

      <FunnelChart

        title="xgqfrms"

        template={title => <Slot title={title}/>}

        slot={<Slot />}

      />

    </div>

  );

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

import React from "react";

const FunnelChart = (props) => {

  const {

    title,

    children,

    slot,

    template,

  } = props;

  console.log(`template`, template);

  return(

    <>

      <span>slot parent component</span>

      <div>

        {

          children

        }

        {

          slot

        }

        <br />

        {

          template && template(title)

        }

        {/* {

          <children title={title} />

        } */}

        {/* {

          slot(title)

        } */}

      </div>

    </>

  );

};

export {

  FunnelChart,

};

export default FunnelChart;



import React from "react";

const Slot = (props) => {

  const {

    title,

  } = props;

  const color = `${title ? "green" : "red"}`;

  return(

    <>

      <span style={{color}}>{title ? title : `default title`}</span>

    </>

  );

};

export {

  Slot,

};

export default Slot;

props.children

https://reactjs.org/docs/composition-vs-inheritance.html



function Dialog(props) {

  return (

    <FancyBorder color="blue">

      <h1 className="Dialog-title">

        {props.title}

      </h1>

      <p className="Dialog-message">

        {props.message}

      </p>

      {props.children}

    </FancyBorder>

  );

}

class SignUpDialog extends React.Component {

  constructor(props) {

    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.handleSignUp = this.handleSignUp.bind(this);

    this.state = {login: ''};

  }

  render() {

    return (

      <Dialog title="Mars Exploration Program"

              message="How should we refer to you?">

        <input value={this.state.login}

               onChange={this.handleChange} />

        <button onClick={this.handleSignUp}>

          Sign Me Up!

        </button>

      </Dialog>

    );

  }

  handleChange(e) {

    this.setState({login: e.target.value});

  }

  handleSignUp() {

    alert(`Welcome aboard, ${this.state.login}!`);

  }

}