this is my first question here,pardon me for any mistake. So ,I have a few inputs and for displaying the values of them I used some elements like h1 and div's which are in a seperate component. I want my elements to have some default value, so for that I kept them in state and then I call an onChange function on inputs which will update my elements state. I tried doing it with event.target like nameElement:event.target.value ,it would have worked if i had one input but because I have multiple inputs ,when I change an input field it gets overwritten by the one I change next. So how can I update only the input field I change. Like if I write something in name input field only the element of CV which is holding the name field should change . Here's my code sandbox link https://codesandbox.io/s/cool-glitter-9w2mh?file=/src/App.js
9
-
much thanks for sending a code sandbox link. Are you familiar with functional components?Noam Yizraeli– Noam Yizraeli2021-09-04 13:11:43 +00:00Commented Sep 4, 2021 at 13:11
-
Check this question. Even check react's official documentation about forms :)marius florescu– marius florescu2021-09-04 13:17:10 +00:00Commented Sep 4, 2021 at 13:17
-
I saw everything works fineViet– Viet2021-09-04 13:21:13 +00:00Commented Sep 4, 2021 at 13:21
-
@Viet Was my question not clear enough? I am getting what I want.Undisclosed– Undisclosed2021-09-04 13:27:14 +00:00Commented Sep 4, 2021 at 13:27
-
Yea, I read that section. It's not helping me with the thing I want. There we have docs about how to get input value in a way like [name]:[value] . But I want to display that [value] by [name] in a different state field.Undisclosed– Undisclosed2021-09-04 13:31:15 +00:00Commented Sep 4, 2021 at 13:31
|
Show 4 more comments
1 Answer
I am not sure, I got the issue right. But I got into the sandbox and below are my observations.
- I would advise using Formik if you are dealing with the user-input form. Link - https://formik.org/docs/tutorial
- Since you have created a single state that contains default value as well as user input value, any changes made by the user is not saved after clicking on "viewCV" link that re-renders entire component.
Changes Required
Have two states : initialData and userDetails.
Modify handleChange
handleChange = (input, e) => { this.setState((prevState) => { return { ...prevState, [input]: e.target.value }; }); };
In components such as workExp, education make sure you link handleChange as an arrow function for the "onChange" event.
<input onChange={(e) => handleChange("job", e)}>Email
Modify submit button to render the Resume template with user inputted values.
Modify viewCV link which is causing entire parent component re-rendering.
5 Comments
Undisclosed
I was about to start doing what you said. But I Just checked my code sandbox and it is not having the latest changes i made just before i posted the question. Idk what's wrong,i visited the link multiple times when I posted the question and even after that,at that time it was showing my changes,now it isn't. Can you please tell me whether you saw the form fields filled or not?
B.Anup
After using two states and modifying submit and viewCV button, I was seeing changes made by the user. There is a problem with state, change handler, submit and viewCV button.
Undisclosed
First of all,thank you so much for bringing it to my notice. I was so obsessed with that problem that I didn't even notice this major one. I checked everything now and found that change handler and submit btn work fine. It loses value only when I click view cv which is an a tag. I searched everywhere, but seems like no one ever had that problem before. I have no idea how to retain the values after clicking that link. Do you have any idea regarding this that how do i come to homepage on view cv click without losing my values?
B.Anup
viewCV link is causing fresh render of the parent component, Hence you are losing all state, since it will be set to default. You may have to come up with different FE design to view newly created CV. One approach would be - Have homepage containing list of resumes created and create resume button. This button should open up a modal that asks details from the user. after clicking submit button, the newly entered details will be appended to the existing resumes state.By this approach, you will be not navigating to the home page by making changes in URL. Hence state won't be reset. Just a sugges
Undisclosed
Yeahh just a few mins ago,finally understood the reason of my problem! To solve, I added one more case in my switch statement which returns CV, so after submitting I am not repeating the steps causing re-rendering. And that solved my issue. Thanks man!