No update component react hooks context

Viewed 27

The function "AdicionaItem" not reload the map of component "Items.tsx" why?

<Itens.tsx>

const { transacao } = useContext(TransacaoContext);
return (
   transacao.itens.map(({descricao}: TransacaoItens) => (<h1>{descricao}</h1>)
);

<TransacaoContext.tsx>

const [transacao, setTransacao] = useState<Transacao>(transacaoInicial);

function AdicionaItem(item: TransacaoItens) {
        let novosValores = transacao;
        novosValores.itens = [...novosValores.itens, item];
        setTransacao(novosValores);
    }

<Consulta.tsx>

const { AdicionaItem } = useContext(TransacaoContext);

function Adiciona(){
   AdicionaItem({descricao: "Teste"});
};

1 Answers

Your useState hook is outside of your functional component. Try moving it inside of AdicionaItem:


function AdicionaItem(item: TransacaoItens) {
        const [transacao, setTransacao] = useState<Transacao>(transacaoInicial);
        let novosValores = transacao;
        novosValores.itens = [...novosValores.itens, item];
        setTransacao(novosValores);
    }
Related