We Keep Coding

Custom onChange event Formik

I'm trying to customize the onChange in formik input to convert the value that is string to number, however, the behavior is not changed, the console.log is also not shown on screen. I believe it is not overwriting Formik's default behavior. What am I doing wrong?
Control Input
<App.FormField name={'monthly_salary'}>
{({field, form}) => (
<C.InputGroup>
<C.InputLeftAddon bg={'primary.100'}>
{'R$'}
</C.InputLeftAddon>
<Custom.Input
variant={'secondary'}
placeholder={t('form.placeholder_value_zero')}
mask={'currency'}
handleChange={(e) => {
console.log(parseValue(e.currentTarget.value))
form.setFieldValue(
field.name,
parseValue(e.currentTarget.value)
)
}}
{...field}
/>
</C.InputGroup>
)}
</App.FormField>
My Custom Component Input
export const Input = ({mask, handleChange, ...props}: InputProps) => {
const handleInput = useCallback(
(e: React.FormEvent<HTMLInputElement>) => {
if (mask === 'currency') {
currency(e)
}
},
[mask]
)
return (
<C.Input
inputMode={'numeric'}
onInput={handleInput}
onChange={handleChange}
{...props}
/>
)
}

I cannot reproduce your code to test it, but I suggest you try this
onChange={(e) => {
handleChange(e);
console.log(parseInt(e.currentTarget.value))
form.setFieldValue(
field.name,
parseInt(e.currentTarget.value)
)
}}
instead of
handleChange={(e) => {
console.log(parseValue(e.currentTarget.value))
form.setFieldValue(
field.name,
parseValue(e.currentTarget.value)
)
}}

You can try something like that:
const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
let newEvent = event;
newEvent.target.value = "asd";
return field.onChange(newEvent);
};

How to create an event similar to onChange in React

I have a react native input component that takes a regex and emit a boolean if the regex matches.
I wanted to do the similar thing but return a string value in React Js but the problem is I don't totally understand how the react native input component is working.
Custom Input component
class CustomInput extends Component {
handleValidation(value) {
const {pattern} = this.props;
if (!pattern) {
return true;
}
// string pattern, one validation rule
if (typeof pattern === 'string') {
const condition = new RegExp(pattern, 'g');
return condition.test(value);
}
// array patterns, multiple validation rules
if (typeof pattern === 'object') {
const conditions = pattern.map(rule => new RegExp(rule, 'g'));
return conditions.map(condition => condition.test(value));
}
}
onChange(value) {
const {onChangeText, onValidation} = this.props;
const isValid = this.handleValidation(value);
onValidation && onValidation(isValid);
onChangeText && onChangeText(value);
}
render() {
const {pattern, onChangeText, children, style, ...props} = this.props;
return (
<Input
style={style}
onChangeText={value => this.onChange(value)}
{...props}
autoCapitalize="none">
{children}
</Input>
);
}
}
Usage
<CustomInput
value={pass} //state variable
onChangeText={onChangePass} //state variable setter
pattern={[regexes.password]}
onValidation={isValid => performValidation(isValid)}
//performValidatio method enables and disables a button according to isValid
/>
Now I want to make a component in ReactJs that has an Input and other elements the input will take a regex and and it will return the value of its input to the parent. It will be used in a form that will have many inputs and all inputs need to have and error msg and validations.

You can create custom component with controlled state. You need to set local state within the custom component. On change of value, you can parse and validate. after that set it to local state. You can leverage error either local of delegate to parent. Here below sample, i have delegated to parent on validation.
const Input = ({
onChangeText,
pattern,
onValidation,
defaultValue,
error,
...rest
}) => {
const [value, setValue] = useValue(defaultValue);
const onChange = ({ target: { value } }) => {
if (pattern) onValidation(pattern.test(value));
setValue(value);
onChangeText(value);
};
return (
<div className="wrapper">
<input value={value} onChange={onChange} {...rest} />
{error && <span>{error}</span>}
</div>
);
};

I have understood the logic if anyone wants to make an input like this they can use this code
I have used react-bootstrap for styling
The Custom Input
import React, { useState } from "react";
export default function CustomInput(props) {
const { error, inputProps, regex, className, onInput } = props;
const [showError, setShowError] = useState(false);
const [text, setText] = useState("");
const handleChange = (val) => {
setText(val);
if (regex.test(val)) {
setShowError(false);
} else {
setShowError(true);
}
onInput && onInput(val);
};
return (
<div className={className}>
<input
value={text}
className={showError ? "form-control border-danger" : "form-control"}
{...inputProps}
onChange={(e) => handleChange(e.target.value)}
/>
{showError && error ? (
<small className="text-danger">{error}</small>
) : null}
</div>
);
}
And use it in a parent component like this
const [temp, setTemp] = useState("");
<CustomInput
className="form-group col-md-3"
inputProps={{ placeholder: "test", maxLength: "50" }}
error="Required"
regex={regexes.url}
onInput={(val) => setTemp(val)}
/>
Somebody please confirm if this is a good approach

Force a single re-render with useSelector

This is a follow-up to Refactoring class component to functional component with hooks, getting Uncaught TypeError: func.apply is not a function
I've declared a functional component Parameter that pulls in values from actions/reducers using the useSelector hook:
const Parameter = () => {
let viz = useSelector(state => state.fetchDashboard);
const parameterSelect = useSelector(state => state.fetchParameter)
const parameterCurrent = useSelector(state => state.currentParameter)
const dispatch = useDispatch();
const drawerOpen = useSelector(state => state.filterIconClick);
const handleParameterChange = (event, valKey, index, key) => {
parameterCurrent[key] = event.target.value;
return (
prevState => ({
...prevState,
parameterCurrent: parameterCurrent
}),
() => {
viz
.getWorkbook()
.changeParameterValueAsync(key, valKey)
.then(function () {
//some code describing an alert
});
})
.otherwise(function (err) {
alert(
//some code describing a different alert
);
});
}
);
};
const classes = useStyles();
return (
<div>
{drawerOpen ? (
Object.keys(parameterSelect).map((key, index) => {
return (
<div>
<FormControl component="fieldset">
<FormLabel className={classes.label} component="legend">
{key}
</FormLabel>
{parameterSelect[key].map((valKey, valIndex) => {
return (
<RadioGroup
aria-label="parameter"
name="parameter"
value={parameterCurrent[key]}//This is where the change should be reflected in the radio button
onChange={(e) => dispatch(
handleParameterChange(e, valKey, index, key)
)}
>
<FormControlLabel
className={classes.formControlparams}
value={valKey}
control={
<Radio
icon={
<RadioButtonUncheckedIcon fontSize="small" />
}
className={clsx(
classes.icon,
classes.checkedIcon
)}
/>
}
label={valKey}
/>
</RadioGroup>
);
})}
</FormControl>
<Divider className={classes.divider} />
</div>
);
})
) : (
<div />
)
}
</div >
)
};
export default Parameter;
What I need to have happen is for value={parameterCurrent[key]} to rerender on handleParameterChange (the handleChange does update the underlying dashboard data, but the radio button doesn't show as being selected until I close the main component and reopen it). I thought I had a solution where I forced a rerender, but because this is a smaller component that is part of a larger one, it was breaking the other parts of the component (i.e. it was re-rendering and preventing the other component from getting state/props from it's reducers). I've been on the internet searching for solutions for 2 days and haven't found anything that works yet. Any help is really apprecaited! TIA!

useSelector() uses strict === reference equality checks by default, not shallow equality.
To use shallow equal check, use this
import { shallowEqual, useSelector } from 'react-redux'
const selectedData = useSelector(selectorReturningObject, shallowEqual)
Read more

Ok, after a lot of iteration, I found a way to make it work (I'm sure this isn't the prettiest or most efficient, but it works, so I'm going with it). I've posted the code with changes below.
I added the updateState and forceUpdate lines when declaring the overall Parameter function:
const Parameter = () => {
let viz = useSelector(state => state.fetchDashboard);
const parameterSelect = useSelector(state => state.fetchParameter)
const parameterCurrent = useSelector(state => state.currentParameter);
const [, updateState] = useState();
const forceUpdate = useCallback(() => updateState({}), []);
const dispatch = useDispatch();
const drawerOpen = useSelector(state => state.filterIconClick);
Then added the forceUpdate() line here:
const handleParameterChange = (event, valKey, index, key) => {
parameterCurrent[key] = event.target.value;
return (
prevState => ({
...prevState,
parameterCurrent: parameterCurrent
}),
() => {
viz
.getWorkbook()
.changeParameterValueAsync(key, valKey)
.then(function () {
//some code describing an alert
});
})
.otherwise(function (err) {
alert(
//some code describing a different alert
);
});
forceUpdate() //added here
}
);
};
Then called forceUpdate in the return statement on the item I wanted to re-render:
<RadioGroup
aria-label="parameter"
name="parameter"
value={forceUpdate, parameterCurrent[key]}//added forceUpdate here
onChange={(e) => dispatch(
handleParameterChange(e, valKey, index, key)
)}
>
I've tested this, and it doesn't break any of the other code. Thanks!

setting state from a different component

First of all, my approach could just be misguided from the start.
I have a component that lists objects added by a sibling component.
I would like the list component to update when a new object is added.
As you can see, I'm calling the same function (getHostedServiceList) in both components. Obviously, this would need t be cleaned up, but I'd like to get it working first
I'm using hooks to accomplish this.
//input
const options = [
{ value: '1', label: '1' },
{ value: '2', label: '2' },
{ value: '3', label: '3' },
];
// class Remotes extends Component {
const Remotes = ({ ...props }) => {
const [service, setService] = useState();
const [url, setUrl] = useState();
const [token, setToken] = useState();
const [displayName, setDisplayName] = useState();
const [apiUrl, setApiUrl] = useState();
const [services, setServices] = useState();
let HOME = process.env.HOME || '';
if (process.platform === 'win32') {
HOME = process.env.USERPROFILE || '';
}
const getHostedServiceList = () => {
console.log('props', props);
if (!fs.existsSync(`${HOME}/providers.json`)) {
return newMessage(
`Unable to locate ${HOME}/providers.json`,
'error',
);
}
const payload = JSON.parse(
fs.readFileSync(`${HOME}/providers.json`),
);
setServices(payload);
};
const setProvider = selectedOption => {
setService(selectedOption.value);
setUrl(`http://www.${selectedOption.value}.com`);
setApiUrl(`http://www.${selectedOption.value}.com/api/v1`);
};
const { onAddRemote } = props;
return (
<div>
<div>Add a remote host:</div>
<StyledSelect
value="Select Provider"
onChange={setProvider}
options={options}
/>
{console.log('service', service)}
<TextInput
label="Url"
defaultValue={url}
onChange={e => {
setProvider(e.target.value);
}}
disabled={!service ? 'disabled' : ''}
/>
<TextInput
label="API Url"
defaultValue={apiUrl}
onChange={e => setApiUrl(e.target.value)}
disabled={!service ? 'disabled' : ''}
/>
<TextInput
label="Token"
onChange={e => setToken(e.target.value)}
disabled={!service ? 'disabled' : ''}
/>
<TextInput
label="Display Name"
onChange={e => setDisplayName(e.target.value)}
disabled={!service ? 'disabled' : ''}
/>
<Button
disabled={!service || !url || !token}
onClick={() => {
onAddRemote({ service, url, apiUrl, token, displayName });
getHostedServiceList();
}}
>
Add Remote
</Button>
</div>
);
};
//list
const HostedProviderList = ({ ...props }) => {
const [services, setServices] = useState();
let HOME = process.env.HOME || '';
if (process.platform === 'win32') {
HOME = process.env.USERPROFILE || '';
}
const getHostedServiceList = () => {
console.log('props', props);
if (!fs.existsSync(`${HOME}/providers.json`)) {
return newMessage(
`Unable to locate ${HOME}/providers.json`,
'error',
);
}
const payload = JSON.parse(
fs.readFileSync(`${HOME}/providers.json`),
);
setServices(payload);
};
useEffect(() => {
// console.log('props 1', services);
getHostedServiceList();
}, []);
return (
<Wrapper>
<Flexbox>
<Title>Provider List</Title>
</Flexbox>
<div>
{services &&
services.map((service, i) => (
<Service key={i}>
<ServiceName>{service.displayName}</ServiceName>
<ServiceProvider>{service.service}</ServiceProvider>
</Service>
))}
</div>
</Wrapper>
);
};
I would like the list component to update when a new object is added.

Yes, you could use Redux (or React's own 'context') for global state handling. However, a simpler solution to be considered might just be to send the data to the parent and pass to the list component like so:
class Parent extends Component {
state = { objectsAdded: [] }
onObjectAdded = ( obj ) => {
// deepclone may be needed
this.setState({objectsAdded: this.state.objectsAdded.concat(obj)})
}
render() {
return (
<Fragment>
<ListComponent objects={this.state.objectsAdded} />
<ObjectAdder onObjectAdded={this.onObjectAdded} />
</Fragment>
}
}

This is where something like Redux or MobX comes in handy. These tools allow you to create a "store" - the place where you load and store data used by different components throughout your app. You then connect your store to individual components which interact with the data (displaying a list, displaying a create/edit form, etc). Whenever one component modifies the data, all other components will receive the updates automatically.
One way this cross-communication is accomplished is through a pub/sub mechanism - whenever one component creates or modifies data, it publishes (or "dispatches") an event. Other components subscribe (or "listen") for these events and react (or "re-render") accordingly. I will leave the research and implementation up to the reader as it cannot be quickly summarized in a StackOverflow answer.
You might also try the new React hooks, as this allows you to easily share data between components. If you choose this option, please take special care to do it properly as it is easy to be lazy and irresponsible.
To get you started, here are some articles to read. I highly recommend reading the first one:
https://reactjs.org/docs/thinking-in-react.html
https://redux.js.org/basics/usage-with-react
https://mobx.js.org/getting-started.html

React Formik : how to use custom onChange and onBlur

I'm starting out with the formik library for react, and I can't figure out the usage of the props handleChange and handleBlur.
According to the docs, handleBlur can be set as a prop on a <Formik/>, and then has to be passed manually down to the <input/>.
I've tried that, with no success :
(I'm keeping the code about handleBlur for more clarity)
import React from "react";
import { Formik, Field, Form } from "formik";
import { indexBy, map, compose } from "ramda";
import { withReducer } from "recompose";
const MyInput = ({ field, form, handleBlur, ...rest }) =>
<div>
<input {...field} onBlur={handleBlur} {...rest} />
{form.errors[field.name] &&
form.touched[field.name] &&
<div>
{form.errors[field.name]}
</div>}
</div>;
const indexById = indexBy(o => o.id);
const mapToEmpty = map(() => "");
const EmailsForm = ({ fieldsList }) =>
<Formik
initialValues={compose(mapToEmpty, indexById)(fieldsList)}
validate={values => {
// console.log("validate", { values });
const errors = { values };
return errors;
}}
onSubmit={values => {
console.log("onSubmit", { values });
}}
handleBlur={e => console.log("bluuuuurr", { e })}
render={({ isSubmitting, handleBlur }) =>
<Form>
<Field
component={MyInput}
name="email"
type="email"
handleBlur={handleBlur}
/>
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>}
/>;
What is wrong with this approach ?
How are handleBlur and handleChange actually supposed to be used ?

You'll need to remove the first handleBlur from Formik as blur event is only valid on the field level and do something like the following in your Field element:
<Field
component={MyInput}
name="email"
type="email"
onBlur={e => {
// call the built-in handleBur
handleBlur(e)
// and do something about e
let someValue = e.currentTarget.value
...
}}
/>
See https://github.com/jaredpalmer/formik/issues/157

According to the above mention question code, you just need to change only one thing i.e. onBlurCapture={handleBlur}
which works on html input element. onBlur, onFocusOut are not supported by the react. However, I got the same issue and finally resolved with component in react-formik with render props.

i faced the same problem using onChange method, which i think do not exist in formik props.
so i used the onSubmit method as it's available in the formik props which gives us the fields values and then passed that values to the concern function like so ...
<Formik
initialValues={initialValues}
validationSchema={signInSchema}
onSubmit={(values) => {
registerWithApp(values);
console.log(values);
}}
>
and there you can use, i simply updated the state and passed it to axios like so...
const [user, setUser] = useState({
name: "",
email: "",
password: ""
});
const registerWithApp = (data) => {
const { name, email, password } = data;
setUser({
name:name,
email:email,
password:password
})
if (name && email && password) {
axios.post("http://localhost:5000/signup", user)
.then(res => console.log(res.data))
}
else {
alert("invalid input")
};
}
and its working ...
I hope its helps you.