Randy_Johnson's avatar

Is this possible in ReactJS, var not passed down

The variable is not being passed down and is shown as undefined.

Dashboard

import ModalCreate from '@/Components/ModalCreate';
import ModalUpdate from '@/Components/ModalUpdate';
import ModalDelete from '@/Components/ModalDelete';

export default function Index({ auth, objects }) {

  const [showCreate, setShowCreate] = useState(false);

  return (
    <AuthenticatedLayout
      user={auth.user}
      header={<h2 className="font-semibold text-xl text-gray-800 leading-tight ml-6">Dashboard</h2>}
    >
      <Head title="Dashboard" />

      <Table
        objects={objects}
        modalCreate={<ModalCreate show={showCreate} setShow={setShowCreate} objects={objects} />}
        modalUpdate={<ModalUpdate />}
        modalDelete={<ModalDelete />}
      />

Table

export default function Table({
    objects,
    modalCreate,
    modalUpdate,
    modalDelete
}) {

    const keys = Object.keys(objects[0] || {});
    const [toggle, setToggle] = useState(true);

    const exclude = ['id', 'desc', 'source', 'email_verified_at', 'created_at', 'updated_at'];
    const bold = ['name', 'head'];

    return (
        <div>
            {modalCreate}
            {modalUpdate}
            {modalDelete}

CreateModal

import React from 'react'
import Modal from '@/Components/Modal';

export default function Create({
  show,
  setShow,
  objects,
}) {

  console.log(show);

  return (
    <Modal show={true}>
        Variable: {show}
    </Modal>
  )
}
0 likes
1 reply

Please or to participate in this conversation.