We Keep Coding

Why I can not initialize value in useState?

tiles is an array of objects
var intialTiles = tiles;
const [newTiles, setNewTiles] = useState(intialTiles);
when I console log newTiles i see undefined , what could be the reson ?

You can send the props to the component this way, <App tiles={[123, 4546]} />
And in the App component,
import "./styles.css";
import { useState, useEffect } from "react";
export default function App(props) {
var intialTiles = props.tiles;
const [newTiles, setNewTiles] = useState(intialTiles);
useEffect(() => {
console.log(newTiles);
}, [newTiles]);
function update() {
setNewTiles([...newTiles, parseInt(Math.random() * 2345, 10)]);
}
return (
<div className="App">
<button onClick={update}>update</button>
<h2>Please check the console output</h2>
</div>
);
}
Hope it helps! live demo here: https://codesandbox.io/s/cocky-bash-23o700?file=/src/App.js:0-506

how to pause the other while one is playing wavesurfer.js?

We decided to use wavesurferJS in our React project. I have multiple audio files. How do I make the others stop when I play one of them? We tried almost all the solutions over the web. Nothing helped. Any help is appreciated.
import React, { useRef, useEffect, useState } from "react";
import WaveSurfer from "wavesurfer.js";
const VoiceItem= ({url }) => {
const waveformRef = useRef();
const [wavesurfer, setWavesurfer] = useState(null);
useEffect(() => {
if (waveformRef.current) {
const wave = WaveSurfer.create({
container: waveformRef.current,
});
wave.load(url);
setWavesurfer(wave);
}
}, []);
const togglePlayPause = () => {
wavesurfer.playPause();
};
return (
<div>
<button onClick={togglePlayPause}>
</button>
<div ref={waveformRef}></div>
</div>
);
};
export default VoiceItem;

How to make a Draggable Div on React with nested event?

I want to make a draggable modal from scratch. Found this tutorial on youtube but it's still using static HTML and vanilla javascript. Tried to use useRef & useEffect on React but I found when clicking the element that using onDrag event inside onMouseDown will only trigger onMouseDown.
The code in vanilla javascript
header.addEventListener("mousedown", () => {
header.classList.add("active");
header.addEventListener("mousemove", onDrag);
});
Code in React
import React, { useRef, useEffect } from 'react'
import ReactDOM from 'react-dom'
import { ModalStyled } from './ModalComponentStyled'
import { ReactComponent as DragIconSVG } from '../../images/drag-icon.svg'
const modalRoot = document.getElementById('modal')
const ModalComponent = ({ close, children, zIndexProps }) => {
let modalWrapper = undefined
const modalRef = useRef()
const moveRef = useRef()
useEffect(() => {
modalWrapper = window.getComputedStyle(modalRef.current)
}, [modalRef])
const dragModalHandler = (e) => {
// const left = parseInt(modalWrapper.left)
// const top = parseInt(modalWrapper.top)
// modalRef.current.style.left = `${left + movementX}px`
// modalRef.current.style.top = `${top + movementY}px`
console.log(e)
}
const mouseDownModalHandler = (e) => {
dragModalHandler(e)
}
return ReactDOM.createPortal(
<ModalStyled zIndexProps={zIndexProps}>
<div className="overlay" onClick={close}></div>
<div ref={modalRef} className="modal-container">
<div className="modal-children">
{children}
<div
className="drag"
ref={moveRef}
onMouseDown={mouseDownModalHandler}
onDrag={dragModalHandler}
>
<DragIconSVG />
</div>
</div>
</div>
</ModalStyled>,
modalRoot
)
I've converted the static vanilla code to sandbox so you guys can see clearly about my context.
https://codesandbox.io/s/draggablediv-pm33s

Got this solution using useState only
https://codesandbox.io/s/draggablemodalreact-7gp38

How to remove outline from Material UI button using by breakpoint

I want to remove the outlined variant at the small medium and down breakpoint. To do this, I have tried to do the following:
const variantType = theme.breakpoints.down('md') ? '' : 'outlined';
<Button name="buyFood" variant={variantType} onClick={this.openFoodModal}>
Buy
</Button>;
This does not do the job. I have tried researching and no one seemed to ask this question before. So here is the first of its kind. lol

You can do this by using the useTheme and the useMediaQuery hooks from Material UI.
import { Button, useTheme, useMediaQuery } from '#material-ui/core'
export default function App() {
const theme = useTheme();
const mediumDown = useMediaQuery(theme.breakpoints.down('md'));
return (
<div className="App">
<Button name="buyFood" variant={mediumDown? 'text' : 'outlined' } onClick={this.openFoodModal}>
Smart Suggest
</Button>
</div>
);
}

You can access your theme settings with the useTheme hook if you have custom theme.
After that you only have to compare the current window width with your breakpoint.
To do this you can simply write a hook that gives you the current window width.
Here is an elegant solution from #QoP
This could then look like this:
./App.js
import React from "react";
import { useTheme } from "#material-ui/core/styles";
import { Button } from "#material-ui/core";
import useWindowWidth from "./useWindowWidth";
export default function App() {
const theme = useTheme();
const width = useWindowWidth();
const variantType = width < theme.breakpoints.values.md ? "text" : "outlined";
return (
<div className="App">
<Button name="buyFood" variant={variantType} onClick={this.openFoodModal}>
Smart Suggest
</Button>
</div>
);
}
./useWindowWidth.js
import { useState, useEffect } from "react";
const getWindowWidth = () => window.innerWidth;
export default function useWindowWidth() {
const [windowWidth, setWindowWidth] = useState(getWindowWidth());
useEffect(() => {
function handleResize() {
setWindowWidth(getWindowWidth());
}
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
return windowWidth;
}
Live demo:

Create ref to external class component inside functional component in React

I would like to use react player library in my app
import React, { useEffect, useRef } from "react";
import ReactPlayer from "react-player";
import { useSelector } from "../../../redux/useSelector";
const VIDEO_URL =
"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
export const Player: React.FC = React.memo(() => {
const player = React.useRef<any>(null);
const targetTimestamp = useSelector((state) => {
const {
timestamps: { selectedTimestamp },
} = state;
return (selectedTimestamp && selectedTimestamp.timestamp) || 0;
});
useEffect(() => {
console.log(player.current);
player.current && player.current.seekTo(targetTimestamp );
}, [targetTimestamp]);
return (
<ReactPlayer
ref={player}
url={VIDEO_URL}
controls
width={1280}
height={720}
/>
);
});
console.log(player.current); works, but on the next line I get the error
Uncaught TypeError: Cannot read property 'seekTo' of undefined
What's wrong? I can't use useRef here? Should I make Player class component? How to fix it and make it work?

////
let player;
const ref = (playerRef) => {
player = playerRef;
}
////
const seekHandler = (event) => {
....
player.seekTo(parseFloat(event.target.value), "fraction");
...
};
...
<ReactPlayer
ref={ref}
.....