What I currently have is a parent component called WhatDo.tsx that has a button which should open a child component called AddToWardrobe.tsx, which is currently simply a form to be filled out. To do this, I’ve used a { boolean ? ( show AddToWardrobe component):(show button to open component)}. However, when I click on the button, instead of opening the AddToWardrobe component, everything disappears from the page including the WhatDo component.

Here is the function for WhatDo.tsx(note that there are two placeholders for future buttons):

export default function WhatDo() {
    const [showATW, setShowATW] = useState(false);


    return(
        <div className="WhatDo">

            <div className="ActionNavText">
                What would you like to do? 
            </div>

            <div className="ActionNavButtons">
                <button id="actionbutton">placeholder</button>
                
                <div className="Show__ATW">
                {showATW? 
                <div className = "ATW__shown">
               <AddToWardrobe onSubmit={postNewItem}/>
               <button onClick ={() => setShowATW(false)}>Nvm!</button>
               </div>
               :
                <button id="actionbutton" onClick={() => {setShowATW(true)}}>Add to your Wardrobe</button>
                }
                </div>
                <button id="actionbutton">placeholder</button>
            </div>

            <div className="SignOutButton">
                <button onClick={signOut}>sign out?</button>
            </div>

        </div>
    )
}

and here is the function for AddToWardrobe.tsx:

interface Props {
    onSubmit:(Item: Item) => void;
}

export default function  AddToWardrobe({onSubmit}: Props) {
    const [itemType, setItemType] = useState<string[]>([]);
    const [itemPrinted, setItemPrinted] = useState(false);
    const [itemColor, setItemColor] = useState<string[]>([]);
    const [secondaryColor, setSecondaryColor] = useState<string[]>([]);
    //type check boxes
    const [accessoryBox, setAccessoryBox] = useState(false);
    const [topBox, setTopBox] = useState(false);
    const [bottomBox, setBottomBox] = useState(false);
    const [shoeBox, setShoeBox] = useState(false);


    const handleTypeSet = (e: any) => {
        const typeValue = e.target.value;
        
        // check for item type
        if(typeValue === "Accessory") {
            setItemType(e.target.checked);
        }
        if(typeValue === "Top") {
            setItemType(e.target.checked);
        }
        if(typeValue === "Bottom") {
            setItemType(e.target.checked)
        }
        if(typeValue === "Shoes") {
            setItemType(e.target.checked);
        }
    }

    //check whether or not printed
    const handlePrintChange = (e: any) => {
        const printValue = e.target.value;

        if (printValue === true) {
            setItemPrinted(e.target.checked);
        } // else false, I guess? 
    }

    function handleSubmit(e:FormEvent) {
        e.preventDefault();
        const CurrentItem: Item = {
            type: itemType,
            printed: itemPrinted,
            primaryColor: itemColor,
            secondaryColor: secondaryColor,
        }
        onSubmit(CurrentItem);
        //probably here the addtowardrobe component will close/return to main screen
        // display a message that says if the item was added successfully or not
    }

    return (
        <div className = "AddToWardrobe">

            <form onSubmit={handleSubmit}>
                <label className = "ATW__question">What would you like to add?</label>
                <div className="ATW__input">
                    <input type="checkbox" value="Accessory" onChange={handleTypeSet} checked={accessoryBox}>Accessory</input>
                    <input type="checkbox" value="Top" onChange={handleTypeSet} checked={topBox}>Top</input>
                    <input type="checkbox" value="Bottom" onChange={handleTypeSet} checked={bottomBox}>Bottom</input>
                    <input type="checkbox" value="Shoes" onChange={handleTypeSet} checked={shoeBox}>Shoes</input>
                </div>

                <label>Is this item printed, textured, or solid?</label>
                <div className="ATW__primarycolor">
                    <input type="checkbox"></input>
                </div>

                <input className='submit' type="submit"value ="Submit"/>

            </form>
        </div>
    )
}

It may be worth noting that the form for AddToWardrobe is also not AS complete as it’s going to be, but I feel like clicking on the button should be rendering something, or at the very least not making the entire parent component disappear!

>Solution :

<input> cannot have children. But in AddToWardrobe Component , you are enclosing text in <input>

  <div className="ATW__input">
                <input type="checkbox" value="Accessory" onChange={handleTypeSet} checked={accessoryBox}>Accessory</input>
                <input type="checkbox" value="Top" onChange={handleTypeSet} checked={topBox}>Top</input>
                <input type="checkbox" value="Bottom" onChange={handleTypeSet} checked={bottomBox}>Bottom</input>
                <input type="checkbox" value="Shoes" onChange={handleTypeSet} checked={shoeBox}>Shoes</input>
            </div>

instead use it like this

  <div className="ATW__input">
                <input type="checkbox" value="Accessory" onChange={handleTypeSet} checked={accessoryBox} />
                <input type="checkbox" value="Top" onChange={handleTypeSet} checked={topBox} />
                <input type="checkbox" value="Bottom" onChange={handleTypeSet} checked={bottomBox}/>
                <input type="checkbox" value="Shoes" onChange={handleTypeSet} checked={shoeBox}/>
            </div>