Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

React erro em onclick Uncaught TypeError: setPlayStatus is not a function

Boa tarde amigos :) Estou treinando sobre o uso de props+onclicks no react atraves de um video. quando uso de outra forma atravez de mensagem eu consigo um resultado positivo mas quando tento usar por props nao consigo o mesmo resultado, acredito que falte algo mas nao consegui nenhum resultado positivo .

Erro: Uncaught TypeError: setPlayStatus is not a function at onClick (Video.js:17:1) at HTMLUnknownElement.callCallback

import React from 'react'
import arrow_btn from '../../assets/arrow_btn.png'
import pause_icon from '../../assets/pause_icon.png'
import play_icon from '../../assets/play_icon.png'

const Video = (setPlayStatus ,playStatus) => {

  return (
    <div>
      <div className='video-explore'>
        <p>Conheça o Verdadeiro Café</p>
        <img src={arrow_btn}></img>
      </div>
      <div className='play'>
        <div className='play-video'>
          <img onClick={()=>setPlayStatus(!playStatus)} src={playStatus?pause_icon:play_icon}></img>
          <p>Assista o video</p>
        </div>
      </div>
    </div>
  )
}
export default Video
import { useState } from 'react';
import Video from './Components/Video/Video';


function App() {
  
  const [playStatus, setPlayStatus] = useState(false)
  return (
    <div className="App">
      <Video         
        setPlayStatus={setPlayStatus}
        playStatus={playStatus}/>
    </div>
  );
}

export default App;
2 respostas
solução!

Boa tarde, Luiz. O problema esta na forma como você está definindo as props no componente Video. No seu código, o componente está recebendo setPlayStatus e playStatus diretamente como argumentos da função. Em vez disso, você deve recebê-los como propriedades de um objeto de props.

import React from 'react';
import arrow_btn from '../../assets/arrow_btn.png';
import pause_icon from '../../assets/pause_icon.png';
import play_icon from '../../assets/play_icon.png';

const Video = ({ setPlayStatus, playStatus }) => {  // Recebe as props como um objeto
  return (
    <div>
      <div className='video-explore'>
        <p>Conheça o Verdadeiro Café</p>
        <img src={arrow_btn} alt="arrow button"></img>
      </div>
      <div className='play'>
        <div className='play-video'>
          <img onClick={() => setPlayStatus(!playStatus)} src={playStatus ? pause_icon : play_icon} alt="play/pause icon"></img>
          <p>Assista o video</p>
        </div>
      </div>
    </div>
  );
}

export default Video;

Obrigado, venho aqui agradecer a explicação. Ajustei no codigo e incremei mas alguns videos e deu tudo certo.