React native: Am having trouble converting state functions to hooks

Question

Am having trouble trying to convert this.state functions or set of codes to hooks, cos I believe hooks are more neater and straight-forward. Here's the code:

 state = { captures: [], // setting flash to be turned off by default flashMode: Camera.Constants.FlashMode.off, capturing: null, // start the back camera by default cameraType: Camera.Constants.Type.back, }; setFlashMode = (flashMode) => this.setState({ flashMode }); setCameraType = (cameraType) => this.setState({ cameraType }); handleCaptureIn = () => this.setState({ capturing: true }); handleCaptureOut = () => { if (this.state.capturing) this.camera.stopRecording(); }; handleShortCapture = async () => { const photoData = await this.camera.takePictureAsync(); this.setState({ capturing: false, captures: [photoData, ...this.state.captures] }) }; handleLongCapture = async () => { setTimeout(() => this.state.capturing && this.camera.stopRecording(), 20*1000); const videoData = await this.camera.recordAsync(); this.setState({ capturing: false, captures: [videoData, ...this.state.captures] });

Answer 1

   const [captures, setCaptures] = useState([]);
   const [flashMode, setFlashMode] = useState(Camera.Constants.FlashMode.off);
   const [capturing, setCapturing] = useState(false);
   const [cameraType, setCameraType] = useState(Camera.Constants.Type.back);

    const setFlashModehandler = (flashMode) => setFlashMode(flashMode);
    const setCameraTypeHandler = (cameraType) => setCameraType(cameraType);
    const handleCaptureInHandler = () => setCapturing(true);

    const handleCaptureOut = () => {
        if (capturing)
            camera.stopRecording();
    };

    const handleShortCapture = async () => {
        const photoData = await camera.takePictureAsync();
        setCapturing(false);
        setCaptures([...captures, photoData]);
    };
    
    const handleLongCapture = async () => {
        setTimeout(() => capturing && camera.stopRecording(), 20*1000);
        const videoData = await camera.recordAsync();
        setCapturing(false);
        setCaptures([...captures, videoData]);

Answer 2

There are three ways of doing this.

The first would be to use the useReducer hook, which might be a little overkill...

The second would be to have one state object, which is not very elegant, but would look something like this:

function FunctionName() {
    // set the state with it's default values
    const [state, setState] = useState({
        captures: [],
        flashMode: Camera.Constants.FlashMode.off,
        capturing: null,
        cameraType: Camera.Constants.Type.back,
    });

        // we spread the previous state, and then set the value we want to change.
        setFlashMode = (flashMode) => this.setState({...state, flashMode});
        setCameraType = (cameraType) => this.setState({...state, cameraType});
        handleCaptureIn = () => this.setState({...state, capturing: true});
    
        handleCaptureOut = () => {
            if (this.state.capturing)
                this.camera.stopRecording();
        };
    
        handleShortCapture = async () => {
            const photoData = await this.camera.takePictureAsync();
            this.setState({...state, capturing: false, captures: [...this.state.captures, photoData]})
            
        };
        
        handleLongCapture = async () => {
            setTimeout(() => this.state.capturing && this.camera.stopRecording(), 20*1000);
            const videoData = await this.camera.recordAsync();
            this.setState({...state, capturing: false, captures: [...this.state.captures, videoData]});
        }

    return <></>;
}

The Third and preferred way would be to have each value in its 'own state' as seen in Rajitha Udayanga 's answer.