I'm struggling to merge the data array of two different identity types into one row as a field. Here's the code I've written:
import React from 'react'
import {Form,Field,ErrorMessage,Formik} from 'formik'
import * as yup from 'yup'
const schema=yup.object().shape({
cmt:yup.string().min(4,'minimum 4 words').required('comment is required'),
name:yup.string().required('Name is required'),
email:yup.string().required('Email is required'),
website:yup.string().required('Enter website URL or name'),
})
function ReplyForm() {
const data=[
{type:'text',placeholder:'Write a comment',identity:'cmt'},
{type:'text',placeholder:'Name',identity:'name'},
{type:'email',placeholder:'Email',identity:'email'},
{type:'text',placeholder:'Website',identity:'website'},
]
return (
<div className='w-full flex justify-center'>
<div className='w-10/12 bg-blue-200'>
<Formik
initialValues={{
cmt:'',
name:'',
email:'',
website:'',
}}
validationSchema={schema}
onSubmit={(values)=>{
console.log(values)
}}
>
{({handleSubmit})=>{
return <Form onSubmit={handleSubmit}>
<div className='w-3/5'>
{data.map((val,i)=>{
if ((val.identity==='name')||(val.identity==='email')){
return <div key={i} className='flex justify-between'>
<Field type={val.type} name={val.identity} placeholder={val.placeholder} className='w-1/2'/>
</div>
}
else{
return <div key={i}>
<Field type={val.type} name={val.identity} placeholder={val.placeholder}/>
</div>
}
})}
</div>
</Form>
}}
</Formik>
</div>
</div>
)
}
export default ReplyForm
The current output looks like this: https://i.sstatic.net/KIIpO.png
However, my desired outcome is to have the "name" and "email" fields on the same row, similar to this: https://i.sstatic.net/3lM3K.png
Please assist me in achieving this layout.