Komponent button w react

Question

Cześć, muszę zrobić zadanie z react, ale dopiero zaczynam i nie mam pojęcia jak się do tego zabrać. Chodzi o to by stworzyć komponent Button, który będzie umiał przyjmować parametry:

• onBtnClick to parametr, który przyjmuje funkcje. Po kliknięciu w button, spraw aby przekazana funkcja z rodzica została uruchomiona. 
• label to tekst, który będzie się wyświetlał jako wnętrze przycisku

Z góry dziękuję.

Answer 1

https://www.youtube.com/watch?v=JfNjGLGaxR4

Tutaj możesz zajrzeć

Comments

Na przykładzie filmiku udało mi się zrobić takie coś, niestety dalej nie działa.

// Button.js

import React from 'react';

const Button = ({onClickFn, label}) => {
  
}

export default Button;

// App.js

import Button from './Button';

<Button onClick={() => onClickFn()}>{label}</Button>

 

---

Ma ktoś może wiedzę i jest w stanie pomóc?

// Button

import React from 'react';

function Button() {
  return(
    <button></button>
  );
}

export default Button;

//App

import Button from './Button';

<button onClick={() => onClickFn()}>{label}</button>

;

Mam tyle i nie wiem jak przekazać parametry.

---

w pliku Button.js Twój komponent nic nie zwraca, musisz tam dodać co ma zwrócić np
 

return (
    <button onClick={funkcja}>{label}</button>
)

 

---

// App

import Button from './Button';
import React from 'react';



const onClickFn = (data) => {
      console.log(data);
    }

export default onClickFn;

// Button

import React from 'react';
import onClickFn from './App';

let label = "Click me!";

function Button() {
  return(
    <button onClick={onClickFn}>{label}</button>
  );
}


export default Button;

Poprawiłem ale test z przekazywaniem funkcji od rodzica nie działa. 

TEST

expect(received).toBe(expected) // Object.is equality

    Expected: 1
    Received: 0

      24 |         const wrapper = shallow(<Button {...props} onBtnClick={onClick} />);
      25 |         wrapper.simulate('click')
    > 26 |         expect(onClick.mock.calls.length).toBe(1);
         |                                           ^
      27 |     });
      28 |   });

 

Answer 2

Przykład w TS
 

type BtnProps = {
  onClick: () => void,
  label: string
}

const BtnComponent = ({onClick, label}: BtnProps) => {
  return (
    <button onClick={onClick}>{label}</button>
  )
}

// wywołanie

const ParentComponent = () => {
  const sayPawi = () => {
    console.log('pawi')
  }

  return (
    <div>
      <BtnComponent onClick={sayPawi} label='say Pawi'/>
    </div>
  );
};

 

Comments

Jednego testu mi nie przechodzi kod, tego z zwracaną funckją.

// Button.js

import React from 'react';

let label = "Click me!";

function Button() {
  return(
    <button onClick={() => onClickFn()}>{label}</button>
  );
}


export default Button;

//TEST 

 Button tests › Dodano parametr funkcji callback odpalanej na kliku w button (onBtnClick)

    ReferenceError: onClickFn is not defined

       5 | function Button() {
       6 |   return(
    >  7 |     <button onClick={() => onClickFn()}>{label}</button>
         |                            ^
       8 |   );
       9 | }
      10 |

 

---

A pokażesz kod dla tego testu?

---

import React from 'react';
import Button from './Button';
import Enzyme, { render, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

const props = {
    label: 'Click me!',
    onBtnClick: jest.fn()
};

describe('Button tests', () => {
    it('Dodano poprawnie komponent przycisku', () => {
      const wrapper = shallow(<Button {...props} />);
      expect(wrapper.find('button').exists()).toBe(true);
    });
    it('Dodano parametr potrzebny do przekazania napisu w buttonie (label)', () => {
      const wrapper = render(<Button {...props} />);
      expect(wrapper.text()).toMatch(props.label);
    });
    it('Dodano parametr funkcji callback odpalanej na kliku w button (onBtnClick)', () => {
        const onClick = jest.fn()
        const wrapper = shallow(<Button {...props} onBtnClick={onClick} />);
        wrapper.simulate('click')
        expect(onClick.mock.calls.length).toBe(1);
    });
  });