i want to change the width of the video player when it comes to tablet size

See also questions close to this topic

• Deployment problems with React-Express App

  I'm trying to deploy a MERN app (built with create react app) to Heroku, but whenever I try to access the URL, it returns with a 404 error.

  During development I structured my project so that it runs on two different servers: client side on local host:3000, which proxies requests to express (at localhost:5000).

  I've run npm run build, set up static middleware, and tried to configure my api calls/routes correctly, but it still isn't working. Any suggestions as to why, and how I can fix it? Details as follows:

  Project Structure

  +client
     |
     +-build
        +-static
          +-css
          +-js
          +-media
     +-node_modules
     +-public
     +-src
       |
       +-components
          +-App.js
          +-index.js
  //server
  +-models
  +-node-modules
  +-package-lock.json
  +-package.json
  +-server.js
  

  Proxy (in package.json):
  "proxy": "http://localhost:5000"

  Server config:

  const port = process.env.PORT || 5000;
  app.listen(port, () => console.log(`Listening on port ${port}`));
  
  
  //Middleware
  if (process.env.NODE_ENV === 'production') {
      app.use(express.static(path.join(__dirname, '../client/build')));
  }
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({ extended: true }));
  app.use(express.urlencoded())
  app.use(cors())
  

  Here's how I;ve structured my APIs. Note: I've removed the 'localhost:5000' from the URL of my axios requests:

  API call from React component:

      useEffect(() => {
      axios.get('/api/all-reviews')
      .then(review => {
          setReviews(review.data)
      })
      .catch(err => {
          console.log(err)
      })
  },[])
  

  Corresponding express route

  app.get('/api/all-reviews', (req,res) => {
      Review.find()
      .then((result) => {
          res.send(result)
      })
      .catch(err => {
          console.log(err)
      })
  })
  
• How with Material UI to align input fields and buttons in the correct way in a dialog

  In my React app, I have to align correctly the items in a dialog of MUI.

  As per the screenshot, I have an issue to align the input fields Date and time. They should be aligned in the center and the Date input should start aligned with the title text above and the Time input should align with the button on the far right Save and close.

  The second main issue is the buttons, I need to position Cancel and Save and close on the right and on the same row but on the left side, the button Remove call.

  I have an issue making these alignments.

  

  The code of the dialog

  const useStyles = makeStyles(theme => ({
    root: {
      margin: 0,
      padding: theme.spacing(1),
      '& .MuiFilledInput-root': {
        borderRadius: 0,
      },
    },
    dialogTitle: {
      marginTop: theme.spacing(2),
    },
    container: {
      margin: theme.spacing(1),
      width: '80%',
    },
    textField: {
      marginLeft: theme.spacing(1),
      marginRight: theme.spacing(1),
    },
    button: {
      marginRight: theme.spacing(1),
      height: 40,
    },
    paper: {
      overflowY: 'unset',
    },
    closeButton: {
      position: 'absolute',
      left: '93%',
      top: '3%',
      color: 'gray',
    },
    buttonRight: {
      justifyContent: 'flex-end',
    },
  }));
  
   <Dialog
        open={open}
        fullWidth
        maxWidth="md"
        classes={{ paper: classes.paper }}
      >
        <DialogTitle className={classes.dialogTitle}>
          <Typography variant="h1" gutterBottom>
            Schedule a call
          </Typography>
          <InfoCallMessage call={appointment} />
        </DialogTitle>
        {!loading ? (
          <>
            <DialogContent className={classes.root}>
              <Grid
                className={classes.container}
                container
                justify="flex-end"
                alignItems="center"
                spacing={1}
              >
                <Grid item xs={8}>
                  <MuiPickersUtilsProvider utils={LuxonUtils}>
                    <DatePicker
                      className={classes.input}
                      disableToolbar
                      variant="inline"
                      label="Date"
                      format="cccc, LLLL dd"
                      helperText=""
                      value={date}
                      margin="normal"
                      onChange={newDate => {
                        handleDateOnChange({ newDate });
                      }}
                      inputVariant="filled"
                      fullWidth
                      minDate={new Date()}
                    />
                  </MuiPickersUtilsProvider>
                </Grid>
  
                <Grid item xs={4}>
                  <TextField
                    key={time}
                    id="time"
                    label="Time"
                    type="time"
                    defaultValue={time}
                    className={classes.textField}
                    InputLabelProps={{
                      shrink: true,
                    }}
                    variant="filled"
                    margin="normal"
                    onChange={e => {
                      const { value } = e.target;
                      setTime(value);
                    }}
                    fullWidth
                  />
                </Grid>
                <ErrorDateTimeIsAfter />
              </Grid>
            </DialogContent>
            <DialogActions className={classes.buttonRight}>
              <IconButton
                className={classes.closeButton}
                onClick={() => closeDialog()}
              >
                <CloseIcon />
              </IconButton>
              <Grid justify="space-between" container spacing={1}>
                <Grid item>
                  <Button
                    color="secondary"
                    variant="contained"
                    onClick={() => closeDialog()}
                    className={classes.button}
                  >
                    Remove call
                  </Button>
                </Grid>
                <Grid item>
                  <Button
                    color="primary"
                    variant="outlined"
                    onClick={() => closeDialog()}
                    className={classes.button}
                  >
                    Cancel
                  </Button>
                </Grid>
                <Grid item>
                  <Button
                    color="primary"
                    variant="contained"
                    onClick={() => handelSave()}
                    className={classes.button}
                    disabled={!isAfter(parseISO(`${date}T${time}`), new Date())}
                  >
                    Save and Close
                  </Button>
                </Grid>
              </Grid>
            </DialogActions>
          </>
        ) : (
          <Loading />
        )}
      </Dialog>
  
• transition animation not working in tailwindcss/react

  I am a newbie learning React & Tailwind. I have a Navbar component which I have written like following,

  const Navbar = () => {
      const [showModal, setShowModal] = useState(false);
  
      return (
          <>
              <nav className="flex justify-between items-center h-16 bg-white text-black relative shadow-md font-quicksand">
                  <Link to='/' className='pl-8'>Project</Link>
                  <div className="px-4 cursor-pointer md:hidden">
                      {/* <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                      </svg> */}
  
                      <button 
                          type="button" 
                          className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
                          id="main-menu"
                          aria-haspopup="true"
                          onClick={() => setShowModal(true)}
                      >
                          <span className="sr-only">Open main menu</span>
                          <svg className="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                          </svg>
                      </button>
                  </div>
                  
                  <div className="pr-8 md:block hidden">
                      <Link to='/' className='p-4 font-bold'>Home</Link>
                      <Link to='/menu' className='p-4 font-bold'>Menu</Link>
                      <Link to='/about' className='p-4 font-bold'>About</Link>
                      <Link to='/contact' className='p-4 font-bold'>Contact</Link>
                      <Link to='/login' className="p-4 font-bold text-indigo-600 hover:text-indigo-500" role="menuitem">Log in</Link>
                      <Link to='/register' className="p-4 font-bold text-indigo-600 hover:text-indigo-500" role="menuitem">Register</Link>
                  </div>
              </nav>
  
              {showModal ? (
                  <div className="absolute top-0 inset-x-0 p-2 transition duration-500 ease-in-out transform origin-top-right md:hidden">
                      <div className="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden">
                          <div className="px-5 pt-4 flex items-center justify-between">
                              <div className="-mr-2">
                              <button 
                                  type="button" 
                                  className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
                                  onClick={() => setShowModal(false)}
                              >
                                  <span className="sr-only">Close main menu</span>
                                  <svg className="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                  </svg>
                              </button>
                              </div>
                          </div>
                          <div role="menu" aria-orientation="vertical" aria-labelledby="main-menu">
                              <div className="px-2 pt-2 pb-3 space-y-1" role="none">
                                  <Link to='/' className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50" role="menuitem">Home</Link>
  
                                  <Link to='/menu' className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50" role="menuitem">Menu</Link>
  
                                  <Link to='/about' className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50" role="menuitem">About</Link>
  
                                  <Link to='/contact' className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50" role="menuitem">Contact</Link>
                              </div>
                              <div role="none">
                                  <Link to='/login' className="block w-full px-5 py-3 text-center font-medium text-indigo-600 bg-gray-50 hover:bg-gray-100" role="menuitem">
                                      Log in
                                  </Link>
                              </div>
                              <div role="none">
                                  <Link to='/register' className="block w-full px-5 py-3 text-center font-medium text-indigo-600 bg-gray-50 hover:bg-gray-100" role="menuitem">
                                  Register
                                  </Link>
                              </div>
                          </div>
                      </div>
                  </div>
              ) : null}
          </>
      )
  }
  

  As you can see that when the screen got smaller the hamburger menu button will appear and when I click on that button it opens a modal with all the header components (The modal code copied from tailwind official components Hero components).

  The problem is when that modal appears tailwind transition animation suppose to happen but it is not working. What am i doing wrong here?? Do i have to use the react hook useEffect somehow to make this work??

  Any kind of answer would be appreciated.
• change the value of useState with setInterval

  I have a simple component with useState that increase a counter in each click -

  function Counter() {
    let [counter, setCounter] = useState(0);
  
    const incCounter = () => {
      setCounter(counter + 1);
    };
  
    return (
      <div className="App">
        <h1>{counter}</h1>
  
        <button onClick={incCounter}>Inc</button>
      </div>
    );
  }
  

  Here is its demo

  and now I want to call the increase function each 1 second , so I added this piece of code into the component function -

  useEffect(() => {
      setInterval(() => {
        incCounter();
      }, 1000);
    }, []); 
  

  Here is its demo

  but I don't see the counter increased in the component.

  How should I write it correctly and see the counter increased in each 1 second as expected ?
• React hooks - send updated value from child to parent component when using onChange and prop of child toghether

  I've two components - Parent and Child using react hooks.

  Here, collected is a state variable of parent component. And it's being passed to TenderInput component.

  const handleBlur = (val) => {
      console.log('::: handleBlur :::');
      console.log(val);
      setCollected(Number(val).toFixed(2));
    }
  
  <TenderedInput
   default={collected}
   focus={focusInput}
   // onChange={handleBlur}
   />
  

  In TenderInput

  const TenderedInput = (props) => {
    const [tendered, updateTendered] = useState(props.default);
  
    const handleChange = (event) => {
      const val = convertToCurrency(event.target.value);
      updateTendered(val);
      // props.onChange(event.target.value); this line causes an issue when I try to update state of parent with this call
    }
  
    return (
      <div className="collected__amount">
        <input
          type="text"
          className="form__input"
          value={tendered}
          onChange={event => handleChange(event)}
          onFocus={event => event.currentTarget.select()}
          autoFocus={props.focus}
          tabIndex="2"
        />
      </div>
    )
  }
  

  TenderInput's textbox and it's onChange event is working fine and updating tendered state of TenderInput component. But at the same I need to update parent's state. Now, collected is in parent and if I add props.onChange(event.target.value), collected is getting updated every time we enter something in textbox and re-renders the component and doesn't allow to enter the correct value.

  I even tried to add props.onChange(event.target.value) in onBlur on TenderInput's textbox but then I need to click on a button twice to make it work.

  **How do I handle updating child component's state and at the same time update parent's state? **
• Why setSlideCount not working as expected?

  import React, {useState} from 'react';
  
  function Slides({slides}) {
  
      const [slideCount, setSlideCount] = useState(0);
      const [slide, setSlide] = useState(slides[0]);
      const [restartDisable, setRestartDisable] = useState(true);
      const [previousDisable, setPreviousDisable] = useState(true);
      const [nextDisable, setNextDisable] = useState(false);
  
      const restartClick = () => {
          setRestartDisable(true);
          setPreviousDisable(true);
          setNextDisable(false);
          setSlide(slides[0]);
          setSlideCount(0);
          console.log("restartCLick ",slideCount);
      }
  
      const previousClick = () => {
          setSlideCount(prevCount => prevCount - 1);
          if (slideCount === 0) {
              setRestartDisable(true);
              setPreviousDisable(true);
              setNextDisable(false);
              setSlide(slides[0]);
          } else {
              setSlide(slides[slideCount]);
          }
          console.log("previousCLick ",slideCount);
      }
  
      const nextClick = () => {
          let newSlideCount = slideCount
          newSlideCount++
          console.log(newSlideCount)
          setSlideCount(newSlideCount);
          if (slideCount === (slides.length - 1)) {
              setNextDisable(false);
              setSlideCount(prevCount => prevCount + 1);
              setSlide(slides[slideCount]);
          } else {
              setRestartDisable(false);
              setPreviousDisable(false);
              setSlide(slides[slideCount]);
          }
          console.log("nextCLick ",slideCount);
      }
  
      return (
          <div>
              <div id="navigation" className="text-center">
                  <button data-testid="button-restart" className="small outlined" disabled={restartDisable} onClick={()=>restartClick()}>Restart</button>
                  <button data-testid="button-prev" className="small" disabled={previousDisable} onClick={()=>previousClick()}>Prev</button>
                  <button data-testid="button-next" className="small" disabled={nextDisable} onClick={()=>nextClick()}>Next</button>
              </div>
              <div id="slide" className="card text-center">
                  <h1 data-testid="title">{slide.title}</h1>
                  <p data-testid="text">{slide.text}</p>
              </div>
          </div>
      );
  
  }
  
  export default Slides;
  

  The setSlideCount() is not setting the slideCount as expected, its incrementing late. Whenever I click nextSlide the increment is shown in the react developer tools but the value remains same of the slideCount. Same thing applies for previousClick button also. But for restart button it works properly in setting to 0 but for the next button clicks and previous button clicks the slideCount value is not updating as expected, please help in setting slideCount value.