How do i get the Operations.js form data logged to the console , when the form in the parent component gets submitted?

Question

So I have a Operations.js Component which gets rendered when a particular button in the parent component(ParamsForm.js) gets toggled. Now what I want is that when the form in the parent component gets submitted I want the data of the parent component form fields as well as the data of the child component form fields to get logged on the console . Is there any way to achieve this ???

ParamsForm.js

import React, { useState, useEffect } from 'react'
import { Form } from 'react-bootstrap'
import styles from '../style.module.css'
import Operations from './Operations'


const ParamsForm = () => {
    const[isToggled,setIsToggled] = useState(false)

  return (
    <div className={styles.paramFormsContainer}>
      <Form>
        <button className={styles.paramFormsBtn}>http://localhost:3000/</button>
        <input style={{flex : 1 }} type="text"></input>
        <button type='button' onClick={()=>setIsToggled(!isToggled)} className={styles.pathParamFormsBtn}>Path Params</button>
        {isToggled && <Operations></Operations>}
      </Form>
      
    </div>
  )
}
export default ParamsForm

Operations.js

import React, { useEffect, useState } from 'react'
import styles from '../style.module.css'
import {FaInfo,FaFileInvoiceDollar} from 'react-icons/fa'
import ReactTooltip from "react-tooltip";

const Operations = () => {
  const[isToggled,setIsToggled] = useState(true)
  const[paramsList,setParamsList] = useState([{params: ""}])
  useEffect(()=>{
    console.log(paramsList)
    console.log(isToggled)
  },[isToggled])
  const handleParamAdd = () =>{
    setParamsList([...paramsList,{params:""}])
  }

  const handleParamRemove = (index) =>{
    const list = [...paramsList]
    list.splice(index,1)
    setParamsList(list)
  }

  const handleParamsChange = (e,index)=>{
    const{name,value} = e.target
    const list = [...paramsList]
    list[index][name] = value
    setParamsList(list)
  }
  return (
    <div >
      <div className={styles.operationsBtnContainer}>
      </div>
      {isToggled && paramsList.map((singleParam,index)=>(<div key={index} className={styles.pathParamsFormParentContainer}>
                    <div className={styles.pathParamsFormChildContainer}>
                    <form>
                    <input name='name' value={singleParam.name} onChange={(e)=>handleParamsChange(e,index)} placeholder="Name..." style={{flex : 1 }} type="text"></input>
                    
                    <select>
                        <option>any</option>
                        <option>string</option>
                        <option>number</option>
                        <option>integer</option>
                        <option>array</option>
                    </select>
                    <input placeholder="Description..." style={{flex : 1 }} type="text"></input>
                    {/* <button><FaFileInvoiceDollar></FaFileInvoiceDollar></button> */}
                    <button data-tip data-for="requiredTip"><FaInfo></FaInfo></button>
                    <ReactTooltip id="requiredTip" place="top" effect="float">
                        required
                    </ReactTooltip>
                    <button type='button' className={styles.addParamsBtn} onClick={handleParamAdd}><span>Add Parameter</span></button>
                    <button type='button' className={styles.removeParamsBtn} onClick={()=>handleParamRemove(index)}><span>Remove Parameter</span></button>
                    </form>
                    </div>
            </div>)) }
    </div>
  
  )
}


export default Operations

Answer 1

There is no submit button in the parent component form, so you can't do anything when it's submitted.

Learn about putting answers of forms in state here

I would store every answer in its own state variable in the parent component, and pass the state set functions of the answers needed in the child to the child through props. You can then set the state through those functions in the child component and the parent component will have the state stored there already.

make a new piece of state for each answer

const [answers, setAnswer1] = useState("default")

pass the state to the child component via props

First, change the arguments of the child component's function to ({setAnswer1, setAnswer2, etc...})

Then pass the props to the child

<Operations setAnswer1={setAnswer1} setAnswer2={setAnswer2} etc.../>

handle input change, paste this inside the parent & child components

handleInputChange(event, setStateCallback) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    setStateCallback(value)
}

pass this function to each input, do the same in both parent and child components

<input onChange={(event) => handleInputChange(event, setAnswer1)}/>

after all this, you're ready to handle the submit event

Copy this function into the parent component

handleSubmit(event){
    event.preventDefault()
    console.log("answer 1's state: ", answer1)
    console.log("answer 2's state: ", answer2)
    // And so on for each piece of state
}

Above is not the cleanest solution, but it works. You could look into a for loop that takes an array of state variables and prints the value or something like that.

You also with need to add onSubmit={handleSubmit} to the form component in the parent component.