Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Is there a way to pass down the object itself as props?

I have an object that has its component inside, and i’d like to fetch the object info inside that component:

const opciones = [ //todas las opciones de los compoentes
        {
            id: "TAB_inicio",
            texto: "Inicio",
            siguiente: "TAB_prueba",
            descripcionTitulo: "Bienvenido al programa de carga de Viajes",
            descripcion: "Selecciona lo que quieras hacer",
            icon: <FaCheckCircle />,
            next: next,
            contenido: <Inicio next={next} test={this} />,
            botonSiguiente: "Nuevo Viaje",
        },
        {
            id: "TAB_descripcion",
            texto: "Descripción",
            siguiente: "TAB_incluido",
            descripcionTitulo: "Descripcion",
            descripcion: "detalles importantes",
            prueba: function prueba() {
                console.log(this)
            },
            icon: <FaBookOpen />,
            next: next,
            contenido: <Descripcion  register={register} />,
            botonSiguiente: "Siguiente",
        },
    ]

I tried doing it by passing "this" but it doesn’t work 😀 help please, i’m trying to understand some concepts with react.

I’m not sure how i would pass it here in the map:

 <section className='col-span-12 p-5 bg-gray-100 border-b-2 border-orange-400 rounded shadow-xl md:col-span-8 lg:col-span-10 dark:border-0 dark:bg-slate-800'>
            <DarkThemeSwitcher isDark={isDark} setDark={setDark} />
            {opciones.map((opcion) => (
                <div key={opcion.id} className={toggle === opcion.id ? "show-content" : "hide"}>
                    <div className='w-full pb-5 mb-4 text-left border-b-2 border-orange-400 dark:border-cyan-400'>
                        <h2 className='text-2xl font-semibold text-black dark:text-white'>
                            {opcion.descripcionTitulo}
                        </h2>
                        <span className='text-black dark:text-white'>
                            {opcion.descripcion}
                        </span>
                    </div>
                    <div>
                        {opcion.contenido}
                    </div>
                 
                </div>
            ))}

I have opcion.contenido to display the component but i want to pass some props which i can’t do because it doesn’t look like <Component … /> it’s just {opcion.contenido}

Tags:

2

Answers


  1. 0

    The below solution may help you

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Dynamic Component Rendering</title>
</head>
<body>
    <div id="root"></div>

    <!-- React and ReactDOM CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
    <!-- Babel CDN for JSX transformation -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">
        // Basic React Components
        const FaCheckCircle = () => {
            return <h1>FaCheckCircle</h1>;
        };

        const Inicio = (props) => {
            return <h1>Inicio {props.next} {props.test}</h1>;
        };

        const FaBookOpen = () => {
            return <h1>FaBookOpen</h1>;
        };

        const Descripcion = (props) => {
            return <h1>Inicio {props.register}</h1>;
        };

        function App() {
            const register = "register";
            const next = "next";

            // Configuration array
            const opciones = [
                {
                    id: "TAB_inicio",
                    texto: "Inicio",
                    siguiente: "TAB_prueba",
                    descripcionTitulo: "Bienvenido al programa de carga de Viajes",
                    descripcion: "Selecciona lo que quieras hacer",
                    icon: <FaCheckCircle />,
                    next: next,
                    contenido: () => <Inicio next={next} test="test" />,
                    botonSiguiente: "Nuevo Viaje",
                },
                {
                    id: "TAB_descripcion",
                    texto: "Descripción",
                    siguiente: "TAB_incluido",
                    descripcionTitulo: "Descripcion",
                    descripcion: "detalles importantes",
                    prueba: function prueba() {
                        console.log(this);
                    },
                    icon: <FaBookOpen />,
                    next: next,
                    contenido: () => <Descripcion register={register} />,
                    botonSiguiente: "Siguiente",
                },
            ];

            // Rendering components dynamically
            return (
                <div>
                    {opciones.map((opcion) => (
                        <div key={opcion.id}>
                            <div className='w-full pb-5 mb-4 text-left border-b-2 border-orange-400 dark:border-cyan-400'>
                                <h2 className='text-2xl font-semibold text-black dark:text-white'>
                                    {opcion.descripcionTitulo}
                                </h2>
                                <span className='text-black dark:text-white'>
                                    {opcion.descripcion}
                                </span>
                            </div>
                            <div>
                                <opcion.contenido />
                            </div>
                        </div>
                    ))}
                </div>
            );
        }

        // Render the App component into the DOM
        ReactDOM.render(<App />, document.getElementById('root'));
    </script>
</body>
</html>
    Login or Signup to reply.
  2. 0

    yes we can pass the object as props, following example shows how we can achieve this.

    function Test() {
  const user = {
    name: 'John Doe',
    age: 30,
    email: '[email protected]',
  };

  return (
    <div>
      <ChildComponent user={user} />
    </div>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search