0

Preciso modificar o state que esta no componente 'Lancamentos', dentro do componente 'FormBody', que por sua vez, esta dentro do component 'Form' (Lancamentos > Form > FormBody). Como eu envio meu state para os componentes filhos, inclusive a função do hook.

Tenho a seguinte estrutura:

export default function Lancamentos({ navigation, route }) {

    //ESSE STATE EU PRECISO ALTERAR DENTRO DE UM COMPONENTE ANINHADO.
    const [descricao, setDescricao] = useState('');

    return (

        <View>

            <Header descricao={descricao} />
            <Form title="titulo do form" subTitle="Subtitulo do form" />

        </View>

    );

}

export default function Form(props) {
    
    return (

        <View>

            <FormHeader {...props} />
            <FormBody {...props} />

        </View>

    );

}

export default function FormBody(props) {
    
    return (

        //AQUI ONDE O STATE SERA MODIFICADO.
        <View>

            <Text>Descrição</Text>
            <TextInput
                placeholder="Descrição"
                value={???}
                onChange={???}
            />

        </View>

    );

}

1 Resposta 1

0

vc precisaria usar contexto ..mas a explicação ficaria muito complexa então vc pode usar hook direto crie um arquivo chamado useSuaPage.ts, ele retorna uma função

export const useSuaPage = () => {
  const [descricao, setDescricao] = useState('');
 
 return {descricao, setDescricao}

}

voce usa essa função nos componentes da seguinte maneira

const {descricao, setDescricao} = useSuaPage() 

ou

const {descricao} = useSuaPage()
const {setDescricao} = useSuaPage()

isso deve funcionar ....mas estude contexts

8
  • Obrigado pela resposta, eu vou testar em seguida informo aqui, e farei isso vou estudar como sugeriu! 4/11/2021 às 20:01
  • Testes feitos, realmente é possível aplicar essa solução, porém é inviável para formulários maiores, no entanto eu acabei estudando contexts, é exatamente o que eu procurava, com o hook useContext() e um provider, tudo ficou simples e bem organizado, e para o crescimento é super viavel, agradeço mesmo a resposta. 5/11/2021 às 23:58
  • boa... vai pra cima kkk
    – EvoluWil
    6/11/2021 às 10:57
  • o problema disso é q no final das contas vc precisa importar o usecontext em todos os lugares q for usar ... e tem um macete pra melhorar isso e usar o seu context como hook
    – EvoluWil
    6/11/2021 às 10:59
  • const SeuContext = createContext<SeuContextData>({} as SeuContextData); export function SeuContext({ children }): JSX.Element { return ( <SeuContext.Provider value={{}}> {children} </SeuContext.Provider> ); } export function useCart(): CartContextData { const context = useContext(CartContext); return context; }
    – EvoluWil
    6/11/2021 às 11:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .