Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Desafio Input Quantidade

Olá pessoal.

No desafio inputQuantidade, o uso do useEffect é para caso alguém for usar o componente e a mudança do estado ocorra com efeitos colaterais?

Eu tinha feito sem o useEffect, mas agora percebi que também não usei o onClick quando passei a prop dele.

AbInputQuantidade.tsx

import React, { useState } from 'react';
import styled from 'styled-components';

 *código de estilização omitida*

export interface AbInputQuantidadeProps {
  titulo: string
  botaoMenos: string
  botaoMais: string
  onClick?: (quantidade: number | string) => void

}

export const AbInputQuantidade = ({ titulo, botaoMais, botaoMenos, onClick}: AbInputQuantidadeProps) => {
  const [quantidade, setQuantidade] = useState(1)

  return (
    <DivEstilizado>
      <LabelEstilizada>{titulo}</LabelEstilizada>
      <QuantidadeContainer>
        <BotaoEstilizado onClick={() => setQuantidade(evento => evento - 1)}>{botaoMenos}</BotaoEstilizado>
        <QuantidadeEstilizado>{quantidade}</QuantidadeEstilizado>
        <BotaoEstilizado onClick={() => setQuantidade(evento => evento + 1)}>{botaoMais}</BotaoEstilizado>
      </QuantidadeContainer>
    </DivEstilizado>
  )
}

AbInputQuantidade.stories.tsx

import React from "react";
import { AbInputQuantidade, AbInputQuantidadeProps } from '../src/components/AbInputQuantidade/AbInputQuantidade'
import { ComponentMeta, ComponentStory } from '@storybook/react'


export default {
  title: 'Componentes/AbInputQuantidade',
  component: AbInputQuantidade
} as ComponentMeta<typeof AbInputQuantidade>

const Template: ComponentStory<typeof AbInputQuantidade> = (args) => <AbInputQuantidade {...args}/>

export const AbInputQuantidadeComponent = Template.bind({})
AbInputQuantidadeComponent.args = {
  titulo: 'Quantidade',
  botaoMenos: '-',
  botaoMais: '+',
} as AbInputQuantidadeProps
1 resposta
solução!

Salve, André!

Sim, a ideia é gerar um efeito colateral sempre que o valor da quantidade mudar. Assim, se foi passada a prop onChange, a gente executa a função :)