jaredpalmer / jaredpalmer/formik

How to pass data from component to initialValues in React Native?

Open
#2,452 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
34.3k
Forks
2.8k
PR merge metrics
No merged PRs in 30d

Description

## ❓Question
Hello everyone. For React Native how can I pass location data from a Component(it's not input and handleChange(), handleBlur() don't work)? I moved initialValues separately like this: const initialValues = { title: "", image: "", location: {} };, and tried various ways to insert location data but it didn't work; when I start with title(it's input tag), then image, then location, it fails to keep location data. If I start with location then title, then image then it works. const initialValues = { title: "", image: "", location: {} };

const NewPlaceScreen = (props) => {
const dispatch = useDispatch();
const [locationCoords, setLocationCoords] = useState({});
// const [titleValue, setTitleValue] = useState("");

const initialValues = { title: "", image: "", location: {} };

const locationPickedHandler = useCallback((locationData) => {
// initialValues["location"] = locationData;
setLocationCoords(locationData);
});

useEffect(() => {
initialValues.location = locationCoords;
}, [initialValues.title, initialValues.image, locationCoords]);

return (
{
console.log("NEW PLACE ", values),
dispatch(
placeActions.addPlace(values.title, values.image, values.location)
);
props.navigation.goBack();
}}
>
{(formikProps) => (

Title


{formikProps.touched.title && formikProps.errors.title}





)}

);
};

Contributor guide

Open the contributing guide

Research direction

Start at the NewPlaceScreen entry point and trace how Formik receives initialValues, how locationPickedHandler updates locationCoords, and how LocationSelector invokes the callback. Reproduce the submission order involving title, image, and location, then confirm that the submitted values retain the selected location.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.