Home > other >  React: Storing functional component in state
React: Storing functional component in state

Time:12-07

Let's say I'd like to render a different child component depending on which button has been clicked:

import { useState } from 'react';

const Bold = ({ text }) => (
    <b>{text}</b>
);

const Italic = ({ text }) => (
    <i>{text}</i>
);

export default function App() {
    const [Component, setComponent] = useState();

    return (
        <>
            <button onClick={() => setComponent(Bold)}>
                Bold
            </button>
            <button
                onClick={() => setComponent(Italic)}
            >
                Italic
            </button>
            {Component && (
                <Component text="I love            
  • Related