Accessing Select Text Value From Formik Select

I am using the following code from a tutorial as a re-usable component for a Material-UI select: import React from 'react'; import { TextField, MenuItem } from '@material-ui/core';

Solution 1:

This should work:

1. Define a state in your app.js file to hold the innerText value from the child component (Select.js in this case).

const [innerTextSync, setInnerTextSync] = useState('')

2. Define a function that changes the state in your app.js:

const updateInnerTextSync=(input)=>{setInnerTextSync(input)}

3. Pass this function as a prop into Select.js

<Selectname="country"label="Country"options={countries}updateInnerTextSync={updateInnerTextSync}
/>

4. Within the handleChange function in Select.js file, update the app state by calling the function you passed in earlier.

const handleChange = evt => {
    const { value } = evt.target;
    const { innerText } = evt.nativeEvent.target;
    setFieldValue(name, value);
    updateInnerTextSync(innerText)
  };

Now the innerText should be available in ur app file.