Input Value Issue

[grave ruin]

I am working on a tip calculator app that has radio inputs for different tip percentages and then a custom input field if you want to add your percentage. The problem I have is that whenever the user clicks one of the radio inputs, the percentage fills in the custom input field. I know this caused by how I set up the value of the custom input field and I was thinking that maybe this could be solved with a conditional statement of some sort where I tell it that if the radio input has been clicked, keep the custom input field as an empty string. I'm just not completely sure how to go about this. This is the code :

import { percentages } from "../data"

export default function SelectTip(props) {

const radioFormElement = percentages.map(percent => {
return (
<div key={percent}
className="select-tip-div">
<input
className="select-tip-radio"
type="radio"
id={percent}
name="tip"
value={percent}
checked={props.formData.tip == {percent}}
onChange={props.handleChange}
/>
<label htmlFor={percent}>{percent}%</label>
</div>

)

})

return (
    <div className='select-tip'>
      <h2>Select Tip %</h2>
      <form className="select-tip-form">
        {radioFormElement}
        <input
        className="custom-tip"
        type="text"
        placeholder="Custom"
        onChange={props.handleChange}
        name="tip"
        value={props.formData.tip}
        />
      </form>
    </div>
)

}

Heres the repo just in case: https://github.com/andicuevasp/tip-calculator

[graceful dragon]

Hi Andrea!! Would you share your scrim, please?😊

[grave ruin]

HI Carmen! It's not a Scrimba scrim hehe I got the idea from Frontend Mentor but you can look at all of my code on my Github (linked above). Here's a video of the error if it helps!

[hybrid musk]

Hey Andrea its seems easy to achieve

if you have created a state for that input field prolly be the value of input field set it to
setInputVal(" ") , might help, setInputVal is just an illustration

cloned you repo...

[grave ruin]

Hey Faraz! If you take a look at the code you will see the problem is that the value of the input is taken from the formData.tip property but since this corresponds to both the radio inputs and the custom inputs, anytime the user clicks on the radio input the value appears in the custom input field 😰

[hybrid musk]

but they have different value attribute to them

let me see how to go about this...

[grave ruin]

But not really because:

function handleChange(e) {
const {name, value, type, checked} = e.target;
setFormData(prevFormData => {
return {
...prevFormData,
[name]: type === "checkbox" ? checked : value
}
})
}

[hybrid musk]

ah we can condtionally make the value set to empty string for that input
but first tell me when you are typing in the input bill field ? do you want to set that to empty string or percentage input?

soon the percent box is clicked , it should set the bill input value set to empty string right?

[grave ruin]

I would like it that when the user clicks the radio inputs (5%, 10% ,etc ) the custom input remains blank, and then when the user types inside the custom input you can see the text, I dont really care if it has a percentage in it exactly because how I did the math for the results takes it as a whole number not decimals

Not the bill input but the custom tip input

Hi @deep spade! Looping you in to see what you think 🧐

[hybrid musk]

doesn't it look good this way? like you can see the percentage amount, bill amout and no of people! you are overdoing it

once it is reset all the fields are set to empty

[grave ruin]

But you can already see the percentage picked when you click the radio inputs with the styling (you helped me with that yesterday hehe 😉 but they weren't there yet when I did the video) and it kinda bothers me that the amount shows up in the custom input when the input purposefully is called custom 😅

[hybrid musk]

also you dont want to disable the rest of checkboxes, if you consider disabling them after the user clicks certain amount of percentages that would be great! but you dont need it becuase you want to switch between percentages

its upto you if you want to disable them

[grave ruin]

I definitely don't want to disable them, like you said I really want the user to able to switch the percentage if they feel like it

😰 I know it's really silly but I feel like there should be a simpler answer haha

[hybrid musk]

k i got it

you can do this for that custom input,
Setting the value like this:

props.formData.billAmount.length > 0 ? percent: ""

is billAmount a number or string, i guess yous set it as a string

[grave ruin]

billAmount is a string that I parsed for the calculations. Where would I put that statement? In the value property for the custom tip?

[hybrid musk]

custom tip input

[grave ruin]

Ok! I will it give it a try and let you know! Thank you somuch @hybrid musk you’re a life saver!

[hybrid musk]

let me know if this works

[grave ruin]

Yup! Give me a couple of minutes and I’ll let you know! I had to step away from my laptop for a bit

[hybrid musk]

one more thing, if you make the bill input value empty and you have the percentage and number of people, will leads to calculation bugs

<div className='select-tip'>
          <h2>Select Tip %</h2>
          <form className="select-tip-form">
            {radioFormElement}
            <input
            className="custom-tip"
            type="text"
            placeholder="Custom"
            onChange={props.handleChange}
            name="tip"
            value={props.formData.billAmount.length >  0 ? props.formData.tip : "0"}
            />
          </form>
        </div>

[grave ruin]

I just realized it wont work because it shouldn't be conditioned by the bill amount IMO

yup! I just tried it just like you did, but it doesn't really do anything because the bill amount doesn't affect it. I think what should affect it is if the radio input is checked

[hybrid musk]

then you have one option listen for on click and set the bill amount to empty string

[grave ruin]

a conditional statement that says if the radio input is checked then the value of the custom input should be empty (or at least invisible) and if it isn't checked then show the custom input value

[hybrid musk]

it will work then, since you are listening for change event and updating the states

[grave ruin]

but why the bill amount? shouldn't it be correlated to the radio inputs?

[hybrid musk]

apply the condtion on checked attribute then

[grave ruin]

how do I do that?

[hybrid musk]

nah but then we need true/false lol

[hybrid musk]

billAmount.length > 0?

[grave ruin]

I meant how do you this, how do apply the condition for the checked attribute

[grave ruin]

maybe I should add an isChecked property to the form data? but also seems convoluted haha

[hybrid musk]

i made it worked finally

the same condition i told you worked

we were just using it on wrong input

[grave ruin]

👏

where did you put it?

[hybrid musk]

condition is applied on both radio and text inputs

[grave ruin]

in the value property?

[hybrid musk]

also to prevent the bugs the i made a little changings

zoom in...

[grave ruin]

yup just saw! thank you so much Faraz!

I really appreciate it!!!

[hybrid musk]

apply them?

want to see if it worked for your or not! because you know its works on my machine 🙂

[grave ruin]

ok I just tried but it didnt work 😰

[hybrid musk]

no way

it should work

[grave ruin]

I swear hahah so weird

[hybrid musk]

let me record it

[grave ruin]

ok! so so weird 😦

[hybrid musk]

Andrea this is your Select tip component:

import { percentages } from "../data";

export default function SelectTip(props) {
  const radioFormElement = percentages.map((percent) => {
    return (
      <div key={percent} className="select-tip-div">
        <input
          className="select-tip-radio"
          type="radio"
          id={percent}
          name="tip"
          value={props.formData.billAmount.length > 0 ? percent : "0"}
          checked={props.formData.tip == { percent }}
          onChange={props.handleChange}
        />
        <label htmlFor={percent}>{percent}%</label>
      </div>
    );
  });

  return (
    <div className="select-tip">
      <h2>Select Tip %</h2>
      <form className="select-tip-form">
        {radioFormElement}
        <input
          className="custom-tip"
          type="text"
          placeholder="Custom"
          onChange={props.handleChange}
          name="tip"
          value={
            props.formData.billAmount.length > 0 ? props.formData.tip : "0"
          }
        />
      </form>
    </div>
  );
}

see the changes

[grave ruin]

yup, mine looks exactly the same to this

[hybrid musk]

copy and paste it?

my lappy not allowing me to record 😥

[grave ruin]

yeah! I copy pasted and it still doesn't work, it still takes the value of the radio inputs

[hybrid musk]

@grave ruin

[grave ruin]

You also get the error, the thing that was bothering me is that the custom input gets filled in with the values you click on the radio buttons, I want that input to be empty unless the user manually inputs the value

[hybrid musk]

you can type inside it

[grave ruin]

😂 I think I'm terrible at explaining my problems! so sorry @hybrid musk

[hybrid musk]

anything user types into it it will take it as its values from this input

[grave ruin]

I know you can, but I don't anything to show up inside UNLESS the user types in manually... I want it to be empty if the user checks one of the radio inputs

[hybrid musk]

this is not an error 🙂

[grave ruin]

I know, it's really not an error but I wanted to find a way for it not to happen. That is why I mentioned the conditional statement but I can't figure out how the statement needs to look in order for it to hide the input value when the radio input is selected

[hybrid musk]

remove the placeholder then 😂

easy peasy

[grave ruin]

right but when you click any of the percentages the value still appears. haha I think I'm just going to let it be

[hybrid musk]

then whats the point of even using it lol

it is there to show the value taken from them percentages inputs

otherwise it has no use

[grave ruin]

no, it's there if you want to add a tip that isn't in the percentages there. so say you want to add 25% tip instead of 20% or 50%

its literally so you can add a custom tip

[hybrid musk]

you can add your custom value and it will take it as its value

in this field

[grave ruin]

I know and it works perfectly, but what I would like is that when the user chooses one of the percentages in the radio inputs, that the custom tip stays empty so that the information to the user is not duplicated

[hybrid musk]

you mean after reseting it still showing that field as previously filled value? right now thats the only thing i see

[grave ruin]

I think I need to create a property for the custom tip on its own so that it doesnt take the value for the the percentages. I will try that and let you know 😄

[hybrid musk]

yea percentage is not a thing coming as a state, so its never empty even after reseting

one solution:
create a state for the data so we can set it empty

const[data,setData] = useState([5,10,20,30])

these are the percentages

[grave ruin]

I don't think that's necessary though. I meant the value of the tip. right now I have :

const [formData, setFormData] = useState(
{
billAmount: "",
tip: "",
numberOfPeople: ""
}
)

but maybe I should have :

const [formData, setFormData] = useState(
{
billAmount: "",
tip: "",
customTip: "",

  numberOfPeople: ""
}

)

[hybrid musk]

yea great

this will work too

[grave ruin]

ok ,I will try it later on, I actually need to go 😰 but thank you so much for your help today!!

[hybrid musk]

no problem! this was a hell of a loop

[grave ruin]

https://tenor.com/view/burn-in-hell-elmo-fire-flame-gif-8764555

I know

[deep spade]

Hey, sorry been away the past few days. So is this solved or should I go through the thread?

[grave ruin]

Hey! I solved it, in the end I get help from a developer friend but it's solved! Thanks @deep spade !