#too many errors to count atp (ts+react)

63 messages · Page 1 of 1 (latest)

buoyant charm
#

image is there so you can see errors easier

#

i rlly got no clue where im going wrong here...

west burrow
#

You prob need brackets around your if conditions

#

@buoyant charm

buoyant charm
#

i do tho?

#

or u mean

#

((x == null) && (y = null)) ?

west burrow
#

Try it

#

Maybe

buoyant charm
#

oh that was easy 😭

west burrow
#

I'm just guessing cause it says there's a parsing error

buoyant charm
#

yeahh

west burrow
#

I thought you knew how to code?

buoyant charm
#

i wish

#

honestly im pretty sure ive written identical code before without that issue

west burrow
#

Lol

buoyant charm
#

i think im going crazy

#

time to go back to tutorials if i get one more error

#

also, if i define a useState in my App.tsx const (playerOneName, setPlayerOneName) for example
if i exported them, then imported them, then edited, would that be the best way of editing them? or is there a more respected/working way

#

havent tried it so im not sure if it would work in first place

willow canopy
buoyant charm
#

wont give me syntax highlighting otherwise

willow canopy
#

Does the error go away if you remove them?

buoyant charm
#

yeah, but my dialog/modal dosent show

#

when it should do

# 
function NameDialog() {

    return (

        <dialog id="nameDialog">

            <form>

                <label htmlFor="playerOneName">Player One Name</label>
                <input id="playerOneName" type="text" />

                <label htmlFor="playerTwoName">Player Two name</label>
                <input id="playerTwoname" type="text" />

                <button type="submit">Submit</button>

            </form>

            <script>
                const modal = document.getElementById('nameDialog');
                modal.openModal();
            </script>

        </dialog>

    )
}

export default NameDialog;
#

wtf it shows syntax highlighting there...

willow canopy
#

That's not how you write code in React

buoyant charm
#

huh

willow canopy
#

One sec

buoyant charm
#

wdym

willow canopy
#

you don't use the script tag in React

#

also, no need to get elements by id

buoyant charm
#

o

buoyant charm
#

cause it might make it a bit easier

#

cause then ik what i would do

#

(i think)

willow canopy
buoyant charm
#

props are like <NameDialog playerOneName=... playerTwoname=... /> right?

willow canopy
#

<MyComponent name = {playerOneName} setName = {setPlayerOneName} />

#

yup

buoyant charm
#

alr tysm

#

im done for today but will give it a go tomorrow

willow canopy
#

Or you could use Redux

buoyant charm
#

whats that?

willow canopy
#

Used for managing state. You should read about "prop drilling"

buoyant charm
#

i will probs do this in the future, gonna try to pass as props for the time being

#

but i got 2 issues, the first one is im not quite sure what to set the type too for them?

#

im using ts so

#

(im pasing a useState setter as a prop into a function component)

#

just gives me error 'Binding element 'setPlayerOneName' implcicity has 'any' type.

#

so ig i have to specify the type

west burrow
#

Ain't that the point of using typescript lol

buoyant charm
#

yes but i just dk what to set it too

#

i need to use the .value attr but it gives error 'Property 'value' does not exist on type 'HTMLElement'

#

but it should do on HTMLInputElement but i cant set it too that 😭

# 
const playerOneNameElement: HTMLInputElement = document.getElementById('playerOneName'); // Type 'HTMLElement | null' is not assignable to type 'HTMLInputElement' type 'null' is not assignable to type 'HTMLInputElement'
const playerOneNameElement: HTMLInputElement | null = document.getElementById('playerOneName'); // Type 'HTMLElement | null' is not assignable to type 'HTMLInputElement | null' Type 'HTMLElement' is missing the following properties...........

errors are commented out, im not writing the full second one its pretty long i cba

#

this is what i see