Gerenciar estado

Olá, Renan, tudo bem?

Acredito que você precise passar o estado para o componente filho utilizando props!

Você teria algo assim (utilizando function components):

export default function ComponentePai() {
    // declaração do estado e outras coisas...

    return (
        <ComponenteFilho filmes={filmes} />
    )
}

E no componente filho:

export default function ComponenteFilho({ filmes }) {    
    return (
        <div>
            { filmes }
        </div>
    )
}

Assim, quando o estado filmes do componente pai atualizar, o componente filho também irá atualizar, e com o valor atualizado de filmes, que recebe pelas props.

Se isso não resolver seu problema, poderia passar os códigos dos componentes para que eu possa te ajudar melhor?

Espero ter ajudado! Abraços e bons estudos :)

Bom dia Antônio,

Ainda não consegui passar o estado. Não sei se é porque estou usando typescript. Vou escrever meu código aqui.

----- COMPONENTE PAI -----

function App() {
  const [filmes, setFilmes] = useState<IFilmes[]>([]);

  return (
    <div>
      <h2>FILMES</h2>
      <Slider setFilmes={setFilmes}></Slider>
    </div>
  );
}

export default App;

----- COMPONENTE FILHO -----

function Slider ({filmes}) {

  return (
      <div>
        {filmes}
      </div>
  )
}

export default Slider;

Mensagem de erro exibida no componente filho.

Obrigado!

Bom dia, Renan.

Bom, como você quer exibir o estado filmes no componente Slider, então o componente pai App deve passar filmes em vez de setFilmes.

Além disso, no componente filho, quando você escreve function Slider ({filmes}), isso quer dizer que filmes também será o nome da propriedade. Ou seja, teremos uma propriedade chamada filmes que receberá o estado chamado filmes também.

Então você deve alterar o código do componente pai para o seguinte:

function App() {
  const [filmes, setFilmes] = useState<IFilmes[]>([]);

  return (
    <div>
      <h2>FILMES</h2>
      <Slider filmes={filmes}></Slider>
    </div>
  );
}

export default App;

Bem, mas ainda falta corrigir o erro de tipo. Para isso, podemos criar um tipo sliderProps que especificará o tipo da props do componente Slider:

type sliderProps = {
    filmes: IFilmes[]
};

function Slider ({filmes}: sliderProps) {

  return (
      <div>
        {filmes}
      </div>
  )
}

export default Slider;

Com isso, garantimos que a props é um objeto que recebe uma propriedade filmes do tipo IFilmes[]. Eu criei um type separadamente por questões de organização, mas você também poderia escrever o código acima dessa forma:

function Slider ({filmes}: { filmes: IFilmes[] }) {

  return (
      <div>
        {filmes}
      </div>
  )
}

export default Slider;

Por fim, apenas uma dica: acredito que o tipo IFilmes que você criou represente um único filme, certo? Assim, um array do tipo IFilmes[] seria uma lista de filmes do tipo IFilmes. Meu conselho é alterar o nome do tipo IFilmes para apenas IFilme, pois indica que é um único filme. Assim, uma lista de filmes seria representada por um array do tipo IFilme[].

Espero ter ajudado! Abraços e bons estudos :)