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