React onClick problem

Question

Po kliknięciu przycisku nic się nie dzieję

kod:

const show = () => {
    console.log("a");
}

const cards = state.map(el =>
    <div key={el.id} className="gallery-card">
        <img src={require('./../img/' + el.image)} alt="" />
        {el.name}
        <Button onClick={show}>Zobacz</Button>
    </div>
);

 

Answer 1

a co się dzieje w komponencie <Button>? Pokaż jak tam wywołujesz propsa onClick. A tak po za tym to radziłbym unikać nazywania własnych propsów tak, jak są nazywane eventy...

Comments

Ten <Button> to raczej nie jest komponent, a zwykły HTML-owy przycisk, bo w React komponentów AFAIK używa się w formie samo zamykającego się znacznika.

Chyba, że tu autor pytania użył a'la projekcji contentu.

---

To jak użyjesz znacznika zależy od przypadku, sam wiele razy stosowałem definiowanie children komponentu, czasami to przydatny sposób na uniwersalny wrapper. A z kodu jaki został pokazany jasno widać że to custom component a nie htmlowy button, zwróć uwagę na wielką literę "B".

---

Racja, JSX patrzy na wielkość liter. Myślałem, że to ma znaczenie głównie przy event handlerach.

Note: Always start component names with a capital letter.

React treats components starting with lowercase letters as DOM tags. For example, <div /> represents an HTML div tag, but <Welcome /> represents a component and requires Welcome to be in scope.

To learn more about the reasoning behind this convention, please read JSX In Depth.