Hi! So, I’m in the proccess of passing 4th project to get a frontend certificate and somehow I don’t understand why I can’t pass some of the test for example:
7. At any time, pressing the clear button clears the input and output values, and returns the calculator to its initialized state; 0 should be shown in the element with the id of “display”.
I can defo see my clear button does it. Maybe you could explain what’s wrong?
As well as tests 8, 9, 11.
Here’s a link:
My calculator
Thank you.
I didnt have time to go through all the code you wrote but from a glance I can see you have two of the same ID’s. You should have unique ID’s on a page, re your code:
id advise to fix this, and see if you cant solve for why those tests arent passing.
Unfortunately, this doesn’t help. thanks for your time though
Writing code for other users on challenges and especially certification projects is against the forum rules.
My bad.
let me see if I can provide better advice, I dont like your render method in app and also what you are doing with initialState
Hi!
So does the situation where I can’t pass the test obviously signs that the app doesn’t work properly?
I’ve just read your featured topic…
I see, I’m curious to know as far as I’m learning. I mean, it’s nice to know something I do wrong at this stage in order not to repeat mistakes in future.
#7 for the first test thats failing they are clicking a bunch of buttons, there is a short delay between buttons before the next one is clicked, (notice the last one in the array is the clear button) after
some additional delay they are checking whether your display is zero:
here… and in the code you had written its not.
Hm, so that means my code evaluates button pressing and changing state for too long?, longer than the delay in the tests?
I’ve recoded with sending props based on isInitialState and not rerendering the component and now tests work nicely. Thank you for the suggestion!
It would appear so, though ive not done this certification yet, I wouldnt want to give an answer if I dont have any idea what im talking about.
Maybe you can research if others posted a similar question ?
I see, I’m curious to know as far as I’m learning. I mean, it’s nice to know something I do wrong at this stage in order not to repeat mistakes in future.
Short of d this coing hallenge from scratch, I didnt have time to yet… I can just say the following of what I saw when I glanced at your code.
Two of the same ID’s (you said it didnt help)
I then observed you were rendering the same component twice passing different props, I would not render the same component twice in the same render… Rather just render one component and change the condition of which props it will recieve. another thing I saw is alot of state, I have heard alot of unnecessary state can lead to bugs. well, i think you also had something for intial state which you were changing on every action and then you kept changing it… its like you needed it only once but you kept changing it on every action… thats wierd right?
like imagine if on every single action on a page im doing this all over again over and over (setting the same state) :
setState(‘somestate’)
// whatever else I want to do
please remember it will rerender whever its props or state changes. maybe someone can comment and shed more light, though I think youve fixed it yes? you may proceed to solve the rest
Thanks for full answer, kravmaguy.
Speaking about state. Let’s say my initial state contains 4 key:value pairs which I need all.
Would it be right to setState in upcoming method to only 2 key:value pairs because I no more need other 2 pairs? Or I should choose more wisely all the pairs I’d need in the future when I initialise state in the first place?
Thanks!
upd: so now I’ve read this topic and know that react merges setState object to the initial state object, that’s why I don’t need to repeat state everytime I modify it.
ill read it later. I dont remember exactly what you were doing in your code before, I just glanced at it, the problem is codepen.io, had you used git we could see what it was before and you could ask a more specific question about a specific part of the code.
Im not sure what you mean, perhaps you could make a new post with code sample to illustrate your specific question. What I was trying to say before, at least what I remember from your code was you had alot of things you were doing and at the top of multiple functions id see something like :
setState('some_value_only_needed_once')
You have to remember setting state is not synchronous, what that means is your code was looking something like:
handleSomeKeyClick=()=>{
setState('some_value_only_needed_once')
// do some other stuff
}
handleSomeOtherAction=()=>{
setState('some_value_only_needed_once')
// do some other stuff
}
I think its not going to wait for setState to finish before it advances to do some other stuff yes? above I just gave two examples, but if I recall correctly you also had been setting state to the same thing in alot of places.
I mean you try this function:
const [count, setCount] = useState(0)
someAction=>{
setState(count+1)
setState(count+1)
}
It wont work. try it yourself.
Maybe they expecting to see some value at some point in time and its not what you think it is. We would have to look at the old code and ask someone that is more experienced with the tests I cant say exactly. If you can make a new post showing a specific code with a specific question that would help.
just because it appears that it works doesnt mean its really working. What if you have to do something immediately with some value? yet instead you are setting the state all over the place. There is a concept TDD, I didnt have the time to research it yet, it is more advanced.
Yes that is good, just to recap If I recall correctly I believe you were also do something like this in your code (though you said you fixed it) :
render (
{someProp && <ComponentA prop={someValue} prop2={someValue2}/> }
{!someProp && <ComponentA prop={someValue} prop2={someValue3}/> }
)
so I mean instead of doing this
{someProp?<button prop={something}/>:<button prop={somethingElse}}
You will rather extract the button as your own custom component and only need to write it once in the render. I also make this same mistake often. I think it has to do with DRY (dont repeat) and preventing errors that can happen from copying and pasting. and keeping your code smaller rather than larger.
Im not an expert in react so youll have to verify that what I say is correct.
Hey, I see. There’s plenty of info to think about. I’ll try to dive more into setState specifics and understand it better.
Thanks again for your time.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.