basic, basic problem: how to get values from form component into App

Question

So I've read the formik docs, and a dozen tuts and examples and I don't understand the most concept of formik and forms.

I am generating random gamer tags, then letting the user rate and organize them. this is all to help me learn react. I need to know which options they want from a list of radio and checkboxes. So I'd love to know in the state of my app (top level), which options the user has picked. Here is an outline of how my app is structured.

function App() {
const [tagInventory, setTagInventory] = useState([]);

const latestTag = tagInventory[tagInventory.length - 1] ? tagInventory[tagInventory.length -1] : null;

const handleAdd = (tag) => {
  setTagInventory([ tag, ...tagInventory ]);
}

const makeTag = () => {
    // generates a random gamertag
    **this is where I'd like to take the options from state and make some logical choices about what each tag looks like**
    
    handleAdd(newTag);
}

return(
   // interface to create, delete and rate random gamertags

   // maps tagInventory through <Tag> component

   <UserForm />
)

//from formik examples:
const UserForm = (props) => {
    return (
    <div>
      <h1>Sign Up</h1>
      <Formik
        initialValues={{
          picked: '',
        }}
        onSubmit={async (values) => {
          await new Promise((r) => setTimeout(r, 500));
          alert(JSON.stringify(values, null, 2));
        }}
      >
        {({ values }) => (
          <Form>
            <div id="my-radio-group">Picked</div>
            <div role="group" aria-labelledby="my-radio-group">
              <label>
                <Field type="radio" name="options" value="bothCaps" />
                Capitalize both parts
              </label>
              <label>
                <Field type="radio" name="options" value="frontCap" />
                Only capitalize first letter
              </label>
              <label>
                <Field type="radio" name="options" value="allCaps" />
                All caps
              </label>
              <div>Picked: {values.options}</div>
            </div>

            <button type="submit">Submit</button>
          </Form>
        )}
      </Formik>
    </div>
  );
}

So how do I get those options from <UserForm> into the state of my App? There is something critical/basic I just don't get about formik/React that I am missing. What prop do I setup?

I see that within <UserForm> I have access to the values from the selection, but I don't know how to send that up through props. I tried making an options hook, passing the hook change function as a prop, but React didn't like it when the lower level component ran it.

Trying to not ask a dumb Q, but I've gone through loads of posts, examples, and tutorials, and every answer is over my head, assumes I know something that I don't, or only contains whatever UserForm component and assumes I know how it should work with the rest of the App, which I don't get.

I tried solving this writing a form in react and couldn't get anywhere either.

Thanks for your help.

ray · Accepted Answer · 2021-03-10 22:44:47Z

1

Pass a function to UserForm and have UserForm call it when it's got something to report:

function App () {
  // ...

  // The name "onFormUpdate" is unimportant.
  // Call it whatever makes sense to you.
  const onFormUpdate = values => {
    // update state or whatever you need to do here
  }

  return (
    <UserForm onUpdate={onFormUpdate} />
  );
}

const UserForm = (props) => {
  return (
      <Formik
        onSubmit={async (values) => {
          await new Promise((r) => setTimeout(r, 500));
          props.onUpdate(values); // call the passed-in function with the new data
        }}
      >
      ...

answered Mar 10, 2021 at 22:44

ray

27.3k5 gold badges31 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

basic, basic problem: how to get values from form component into App

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related