We Keep Coding

how show input only if checkbox is cheked? Reac | next.js

I try to manage this task but I don’t understand how should I do.
I want to show the promo code field only if the checkbox(I have promo code) is checked.
Also, it would be great to show this field use js method, not CSS style display:none
Please help if you have any idea
Maybe it should be simle function with if else?
import React from "react";
import { useState } from "react";
import { Box, Button, chakra, Link, Stack, VStack } from "#chakra-ui/react";
import { Heading } from "#/components/shared/Heading";
import { FieldError, useForm } from "react-hook-form";
import FormInput from "#/components/base/form/FormInput";
import FormRadioCard from "#/components/base/form/FormRadioCard";
import NextLink from "next/link";
import composeValidations, {
validations,
} from "../../base/form/validations/formValidations";
import FormCheckbox from "#/components/base/form/FormCheckbox";
import { UseFormRegisterReturn } from "react-hook-form/dist/types/form";
import { LeadFormAnswers } from "#/components/lead-form/form/useLeadForm";
import IncentiveBubble from "#/components/base/IncentiveBubble";
import FormPhoneNumber from "#/components/base/form/FormPhoneNumber";
const LINK_SEPARATOR = "{{link}}";
const PrivacyPolicyCheckbox: React.FC<PrivacyPolicyCheckboxProps> = ({
registerProps,
link,
error,
text,
}) => {
const sentenceParts = text.split(LINK_SEPARATOR);
const firstPart = sentenceParts[0];
const secondPart = sentenceParts[1];
return (
<FormCheckbox
error={error}
registerProps={registerProps}
px={[5, 8]}
mt={6}
>
{firstPart}
<NextLink href={link.href} passHref>
<Link color="blue.400" target="_blank">
{link.title}
</Link>
</NextLink>
{secondPart}
</FormCheckbox>
);
};
const emailValidation = composeValidations(
validations.requiredEmail,
validations.rejectForbiddenDomains,
validations.rejectDisposableEmails
);
const Row: React.FC = ({ children }) => (
<Stack gap={6} w="full" direction={["column", "row"]}>
{children}
</Stack>
);
const EmbeddedRow: React.FC<{ embedded?: boolean }> = ({
children,
embedded,
}) => {
if (embedded) {
return <Row>{children}</Row>;
}
return <>{children}</>;
};
const LeadFormFirstPage: React.VFC<LeadFormFirstPageProps> = ({
onSubmit,
embedded,
title,
emailLabel,
emailForbiddenDomainErrorLink,
numberOfEmployeesLabel,
numberOfEmployeesOptions,
privacyPolicyText,
privacyPolicyLink,
submitText,
bubbleText,
promoCodeText,
promoCodeLabel,
}) => {
const {
register,
formState: { errors },
handleSubmit,
control,
setValue,
} = useForm<LeadFormAnswers>();
return (
<Box>
<Heading px={[5, 8]} level={3} mb={8} fontWeight={600}>
{title}
</Heading>
<Box
as={chakra.form}
onSubmit={handleSubmit((data) => {
if (!embedded) {
window.scrollTo({ top: 0 });
}
onSubmit(data);
})}
>
<VStack gap={6} alignItems="flex-start" px={[5, 8]}>
<EmbeddedRow embedded={embedded}>
<FormInput
w="full"
label={emailLabel}
error={errors.email}
errorParams={{ link: emailForbiddenDomainErrorLink }}
registerProps={register("email", emailValidation)}
/>
</EmbeddedRow>
</VStack>
<FormRadioCard
label={numberOfEmployeesLabel}
name="numberOfEmployees"
control={control}
options={numberOfEmployeesOptions}
/>
<PrivacyPolicyCheckbox
error={errors.consent}
registerProps={register("consent", validations.required)}
text={privacyPolicyText}
link={privacyPolicyLink}
/>
<VStack gap={6} alignItems="flex-start" px={[5, 8]}>
<FormCheckbox
mt={6}
label={promoCodeText}
registerProps={register("checkbox")}
>
{promoCodeText}
</FormCheckbox>
<Row>
<FormInput
w="full"
label={promoCodeLabel}
registerProps={register("promoCode")}
/>
</Row>
</VStack>
<IncentiveBubble
text={bubbleText}
variant="transparent"
mt={[6, 10]}
px={[5, 8]}
>
<Button variant="primary" size="M" type="submit">
{submitText}
</Button>
</IncentiveBubble>
</Box>
</Box>
);
};
type LinkProps = { title: string; href: string };
export type LeadFormFirstPageProps = {
onSubmit(data: LeadFormAnswers): void;
embedded?: boolean;
title: string;
emailLabel: string;
emailForbiddenDomainErrorLink: string;
numberOfEmployeesLabel: string;
numberOfEmployeesOptions: string[];
privacyPolicyText: PrivacyPolicyCheckboxProps["text"];
privacyPolicyLink: PrivacyPolicyCheckboxProps["link"];
submitText: string;
bubbleText: string;
promoCodeText: string;
promoCodeLabel: string;
};
export default LeadFormFirstPage;

Here is a simple approach where we have the checkbox then the text input field of the promo code. We use the checked value of the checkbox to show/hide the promo code field.
import React, { useState } from "react";
export default function CheckBoxExample() {
// checked state and the onChange method
const [hasPromo, setHasPromo] = useState(false);
const onChangeCheckBox = (e) => {
setHasPromo(e.target.checked);
};
// the promo code input field value and the onChange method
const [promo, setPromo] = useState("");
const onChangePromo = (e) => {
setPromo(e.target.value);
};
return (
<div>
<form>
<input type="checkbox" checked={hasPromo} onChange={onChangeCheckBox} />
{hasPromo && (
<input type="text" value={promo} onChange={onChangePromo} />
)}
</form>
</div>
);
}

hope this example helps you understanding how to toggle a state of an element with useState :
import { useState } from "react";
export default function App() {
const [isChecked, setIsChecked] = useState(false);
return (
<div className="App">
<input
type="checkbox"
defaultChecked={isChecked}
onClick={() => setIsChecked(!isChecked)}
/>
{isChecked ? "text is shown" : "text should be hidden"}
</div>
);
}

Form validation with conditional fields using yup

I am trying to conditional render the fields and submit the data.
But on the below code snippet, i am not able to achieve this. Issues are re rendering happens and the values not getting persisting.
Here mostly the problem is i am splitting the schema, so based on the selection of the choice the field renders.
How can i submit the data with proper persisting the validation and values.
What i have tried so far
App.js
import React, { useEffect, useState } from "react";
import "./styles.css";
import Select from "react-select";
import { Controller, useForm } from "react-hook-form";
import { yupResolver } from "#hookform/resolvers";
import { CITIZEN_OPTIONS, validationSchema } from "./util";
import { Resident, NonResident } from "./CitizenDetails";
const Fallback = () => null;
export default function App() {
const [citizenValue, setCitizenValue] = useState(null);
const { register, control, errors, watch, handleSubmit } = useForm({
resolver: yupResolver(validationSchema),
mode: "onBlur",
reValidateMode: "onChange"
});
const watchCitizen = watch("citizen");
useEffect(() => {
setCitizenValue(watchCitizen?.value);
}, [watchCitizen]);
const citizenDetails = {
resident: () => <Resident errors={errors} register={register} />,
non_resident: () => (
<NonResident errors={errors} control={control} register={register} />
)
};
const onSubmit = (data) => {
console.log(data);
};
const SelectedCitizenFields = citizenDetails[citizenValue] || Fallback;
return (
<div className="App">
<Controller
as={Select}
control={control}
name="citizen"
options={CITIZEN_OPTIONS}
></Controller>
<SelectedCitizenFields />
<button onClick={handleSubmit(onSubmit)}>Submit Details</button>
</div>
);
}
CitizenDetails.js
import React, { Fragment, memo } from "react";
import { Controller } from "react-hook-form";
import Select from "react-select";
export const Resident = memo((props) => {
const { errors, register } = props;
return (
<Fragment>
<div className="field-group">
<label>Enter first name</label>
<input ref={register} name="first_name"></input>
{errors?.first_name?.message && (
<span>{errors.first_name.message}</span>
)}
</div>
<div className="field-group">
<label>Enter last name</label>
<input ref={register} name="last_name"></input>
{errors?.last_name?.message && <span>{errors.last_name.message}</span>}
</div>
</Fragment>
);
});
export const NonResident = memo((props) => {
const { errors, register, control } = props;
return (
<Fragment>
<div className="field-group">
<label>Enter passport number</label>
<input ref={register} name="passport_number"></input>
{errors?.passport_number?.message && (
<span>{errors.passport_number.message}</span>
)}
</div>
<div className="field-group">
<label>Choose Country</label>
<Controller as={Select} control={control} name="country" options={[]} />
{errors?.country?.message && <span>{errors.country.message}</span>}
</div>
<div className="field-group">
<label>Choose State</label>
<Controller as={Select} control={control} name="state" options={[]} />
{errors?.state?.message && <span>{errors.state.message}</span>}
</div>
</Fragment>
);
});
util.js
import { object, string, number, lazy } from "yup";
export const CITIZEN_OPTIONS = [
{
label: "Resident",
value: "resident"
},
{
label: "Non-Resident",
value: "non_resident"
}
];
const required = () => "field is required";
const resident_schema = object({
first_name: string().required(required).nullable(),
last_name: string().required(required).nullable()
});
const non_resident_schema = object({
passport_number: string().required(required).nullable(),
country: object().required(required).nullable(),
state: object().required(required).nullable()
});
export const validationSchema = lazy(({ citizen }) => {
return citizen?.value === "resident" ? resident_schema : non_resident_schema;
});
Here is the codesandbox link

Value on Object is null when sending from axios to API Controller.How to solve it?

I am making React Crud Application and when try to send data from axios to API Controller I am not able to send those data, while checking in API I found that all the the values are null. But with the same API and values i tried from POSTMAN it worked perfectly. How Can i solve this?
import React, { FormEvent, useState } from 'react'
import { Segment, Grid, GridColumn, Button, Form, Container } from 'semantic-ui-react'
import { IEmployee } from '../Model/activity'
import { RouteComponentProps } from 'react-router-dom'
import axios from 'axios';
import {v4 as uuid} from 'uuid';
interface DetailParams {
id: string;
}
const EmployeeForm : React.FC<RouteComponentProps<DetailParams>> = ({ match, history }) => {
const [employee, setEmployee] = useState<IEmployee>({
id: '',
firstName: '',
lastName: '',
address: '',
organization: ''
})
const handleInputChange = (event: FormEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const { name, value } = event.currentTarget;
setEmployee({ ...employee, [name]: value })
}
const handleSubmit = () => {
console.log(employee);
if (employee.id.length === 0) {
let newActivity = {
...employee,
id: uuid(),
}
console.log(employee);
axios.post('https://localhost:44353/Employee/CreateEmployee',{data : employee})
.then((response) => {
history.push(`/manage/${newActivity.id}`)
})
} else {
axios.post('https://localhost:44353/Employee/EditEmployee',{data : employee})
.then((response) => {
history.push(`/manage/${employee.id}`)
})
}
}
return (
<Container style={{ marginTop: '7em' }}>
<Grid>
<GridColumn width={10}>
<Segment clearing>
<Form onSubmit={handleSubmit}>
<Form.Input name='firstName' onChange={handleInputChange} placeholder='First Name' value={employee.firstName} />
<Form.TextArea name='lastName' onChange={handleInputChange} placeholder='Last Name' value={employee.lastName} />
<Form.Input name='address' onChange={handleInputChange} placeholder='Address' value={employee.address} />
<Form.Input name='organization' onChange={handleInputChange} placeholder='Organization' value={employee.organization} />
<Button floated='right' positive type='submit' content='Submit' />
<Button onClick={() => history.push('/employeeList')} floated='right' type='button' content='Cancel' />
</Form>
</Segment>
</GridColumn>
</Grid>
</Container>
)
}
export default EmployeeForm
The above is my form class from where the data is to be send from axios.
While Console.log in handle submit button the values are displayed perfectly.
My NET.Core API is :-
[HttpPost]
public async Task<ActionResult> CreateEmployee([FromBody] Employee Employee)
{
var result = await _employeeService.CreateEmployee(Employee);
return Ok(Employee.FirstName);
}

It was wrong with syntax. when chane changed axios.post('https://localhost:44353/Employee/CreateEmployee',{data : employee}) to axios.post('https://localhost:44353/Employee/CreateEmployee',employee) it worked fine

React - Invariant Violation: Minified React error #130. ONLY in Production

Using React Materialize's TextInput component breaks my site only in production.
In development it works fine. with no errors or warnings.
I've seen some Stack posts about components not being exported/imported correctly. However my components all appear to be exported/imported correctly. The TextFieldGroup component is a default export and is imported as such, while TextInput is a named export and is imported using curly brackets.
The TextFieldGroup is a wrapper component the handles all the input validation and renders the Materialize TextInput comp.
I have narrowed the issue down to the TextInput component as I have tried replacing the TextFieldGroup component with just the <input /> and putting the <input /> inside my TextFieldGroup wrapper comp.
Please my project with the issue. Click the login button to see if fail to render the page because its trying to the TextInput.
Login.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Row, Col, Button } from 'react-materialize';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import TextFieldGroup from '../../components/common/TextFieldGroup';
import { loginUser } from '../../actions/authActions';
class Login extends Component {
state = {
usernameOrEmail: '',
password: '',
errors: {}
}
onChange = e => {
const errors = this.state.errors;
errors[e.target.name] = '';
this.setState({
[e.target.name]: e.target.value,
errors
});
}
onSubmit = e => {
e.preventDefault();
const userData = {
usernameOrEmail: this.state.usernameOrEmail,
password: this.state.password
}
this.props.loginUser(userData);
}
componentDidMount = () => {
if (this.props.auth.isAuthenticated) {
this.props.history.push('/dashboard');
}
}
componentWillReceiveProps = (nextProps) => {
if (nextProps.auth.isAuthenticated) {
this.props.history.push('/dashboard');
}
if (nextProps.errors) {
this.setState({errors: nextProps.errors});
}
}
render() {
const { errors } = this.state;
return (
<Row>
<Col s={12} m={6} className="offset-m3">
<h2 className="center">Login</h2>
<form noValidate onSubmit={this.onSubmit}>
<Row>
<TextFieldGroup
placeholder="Username or email"
name="usernameOrEmail"
type="text"
value={this.state.usernameOrEmail}
onChange={this.onChange}
error={errors.usernameOrEmail}
/>
<TextFieldGroup
placeholder="Password"
name="password"
type="password"
value={this.state.password}
onChange={this.onChange}
error={errors.password}
/>
<Col s={12}>
<Link className='col s12' to="/forgotten-password">Forgotten password?</Link>
<Button className="btn-small right" waves="light">Login</Button>
</Col>
</Row>
</form>
</Col>
</Row>
)
}
}
Login.propTypes = {
loginUser: PropTypes.func.isRequired,
auth: PropTypes.object.isRequired,
errors: PropTypes.object.isRequired
};
const mapStateToProps = (state) => ({
auth: state.auth,
errors: state.errors
});
export default connect(mapStateToProps, { loginUser })(Login);
TextFieldGroup.js
import React from 'react';
import classnames from 'classnames';
import propTypes from 'prop-types';
import { TextInput } from 'react-materialize';
const TextFieldGroup = ({
name,
placeholder,
value,
label,
error,
info,
type,
onChange,
disabled
}) => {
return (
<React.Fragment>
<TextInput
type={type}
inputClassName={classnames('form-control form-control-lg', {
'is-invalid': error
})}
placeholder={placeholder}
label={label}
name={name}
s={12}
value={value}
onChange={onChange}
disabled={disabled}
/>
{error && (<p className="red-text col s12 no-margin">{error}</p>)}
{info && (<p className="helper-text col s12">{info}</p>)}
</React.Fragment>
)
}
TextFieldGroup.propTypes = {
name: propTypes.string.isRequired,
placeholder: propTypes.string,
value: propTypes.string.isRequired,
info: propTypes.string,
error: propTypes.string,
type: propTypes.string.isRequired,
onChange: propTypes.func.isRequired,
disabled: propTypes.string
}
TextFieldGroup.defaultProps = {
type: 'text'
}
export default TextFieldGroup;
I expect the page to be able to render the login and register page correctly when using the React-Materialize TextInput component.

Turns out I needed to delete package-lock.json and node_modules on the server then run $ npm install again.

React-select is not send in the request payload

I'm using react-select with react-bootstrap, but it don't send the selected options in the select to the request payload, it only sends the first two inputs
I've tried lots of props as you can see in the code, but when I check the request payload it doesn't send the select
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Form from 'react-bootstrap/Form'
import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import Button from 'react-bootstrap/Button'
import Select from 'react-select'
export default class CreateMembro extends Component {
constructor(props) {
super(props)
this.state = {mem_nome: '', mem_data_nascimento: '', selectedOption: null, opcoes: []}
this.handleFormInput = this.handleFormInput.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
this.handleChange = this.handleChange.bind(this)
}
getHostName() {
return `http://${window.location.hostname}`
}
componentDidMount() {
axios.get(`${this.getHostName()}/get-all-ministerios`).then((res) => {
let response = []
res.data.map(r => {
r.value = r.min_nome
r.label = r.min_descricao
delete r.min_nome
delete r.min_descricao
delete r.min_id
delete r.created_at
delete r.updated_at
response.push(r);
})
this.setState({ opcoes: response})
})
}
handleChange(selectedOption) {
this.setState({ selectedOption });
console.log(selectedOption)
}
handleSubmit(event) {
event.preventDefault()
const dataForm = {
mem_nome : this.state.mem_nome,
mem_data_nascimento : this.state.mem_data_nascimento
}
axios.post(`${this.getHostName()}/membros`, dataForm).then((response) => {
console.log(response.data)
}).catch((error)=>{
console.log(error)
})
}
handleFormInput(event) {
this.setState({
[event.target.id]: event.target.value
})
console.log(event.target.id+'--'+event.target.value)
}
render() {
return (
<Container>
<Row>
<Col md={6}>
<Form onSubmit={this.handleSubmit}>
<Form.Group>
<Form.Label>Nome do Membro</Form.Label>
<Form.Control id="mem_nome" type="text" placeholder="Nome do Membro" onChange={value = handleFormInput(value)} />
<Form.Label>Data de Nascimento</Form.Label>
<Form.Control id="mem_data_nascimento" type="date" placeholder="Data de Nascimento" onChange={value = handleFormInput(value)}/>
<Form.Label >Ministérios</Form.Label>
<Select
id="minid"
name="asdasd89NAMEEE"
ref="refsid"
inputId={"minresss"}
inputId="ministerios"
controlId="sdasd78gd"
isMulti={true}
labelKey="labelkeu"
isSearchable={true}
value={this.state.selectedOption}
onChange={value = handleChange(value)}
options={this.state.opcoes}
placeholder="Selecione o(s) ministério(s)">
</Select>
</Form.Group>
<Button type="submit" variant="primary">
Enviar
</Button>
</Form>
</Col>
</Row>
</Container>
);
}
}
I expect that the select values goes into the request payload.

I'm using the same library like you so you can take a look at mine code
I think your code should be change to something like this
change from this
onChange={value = handleChange(value)}
to this
onChange={value => handleChange(value)}
and
const dataForm = {
mem_nome : this.state.mem_nome,
mem_data_nascimento : this.state.mem_data_nascimento,
selectedOption: this.state.selectedOption // you missing this
}