0

I am looking to pass a schema from child components and combine the schema and use it at the main App(parent level). Its basically yup schema which is at component level which needs to be merged from components and used in the main App.

Component1
const schema =  Yup.object().shape({Name:Yup.string().required()})
const comp1 = () => { 
}
Component2  
const schema =  Yup.object().shape({Age:Yup.string().required()})
const comp2 = () => {
}


<App validationSchmea={mergedSchemas}/>

Inside the App the components live.

Hoc will take in the Schemas and concat it and export it to the main App (parent) What would be the best way to export the schema using a HoC and then on the main app use the HoC to get all schemas from all components. 

The Logic to Merge Schemas :



import { emailSchema } from '../components/Email'
import { dateSchema } from '../components/DateofBirth'
import { nameSchema } from '../components/Name'
import { taxIdSchema } from '../components/TaxId'
import { phoneSchema } from '../components/Phone'
import { maritalSchema } from '../components/MartialStatus'
import { citizenSchema } from '../components/CitizenStatus'
import { addressSchema } from '../components/Address'



const mergeSchemas = (...schemas) => {
const [first, ...rest] = schemas;

const merged = rest.reduce(
    (mergedSchemas, schema) => mergedSchemas.concat(schema),
    first
);
return merged;
}

const mergedSchemas = mergeSchemas(emailSchema, dateSchema, nameSchema, 
taxIdSchema, phoneSchema, maritalSchema, citizenSchema, addressSchema)

export default mergedSchemas

I am looking best practices to use the Hoc from the component level to the top level.Any suggestions ?

Devuatprod
  • 147
  • 1
  • 11
  • creating something similar to `react-redux` might work – marzelin Oct 23 '19 at 21:47
  • I have edited the post with the current code , so currently I am importing it from every component and merging , I am looking to build a Hoc which would take the schema from the component and later call the function to get the combined schema. Thats the whole idea around it. – Devuatprod Oct 23 '19 at 21:54
  • in your case this looks like a valid solution. I'm just confused by the "from child components to parent components" aspect. Technically these schemas are not part of any child of that parent App-component. I assume you are exporting the schemas from the component files? – Benjamin Oct 23 '19 at 22:05
  • Yes so techinally it would be to reduce the exporting and importing of the schema. The main Formik form component should have the combined valdiation schema . so its like clubbing the schemas from the component level and giving it to the main formik schema that is on the top level in order to have the controlled valdiations. – Devuatprod Oct 23 '19 at 22:07

0 Answers0