Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
    please see updated version of my example
    Anyone can explain what's wrong here ?
    Mohammad Amin Najafi
    how to set state when call dispatch action?
    function ScheduleCalendar() {
      const [data, setData] = React.useState({});
      const schedule = useSelector((state) => state.schedule);
      const loading = useSelector((state) => state.schedule.loading);
      const dispatch = useDispatch();
      useEffect(() => {
      }, []);
    Tevon Davis

    Goodnight everyone I’ve been thinking over how to handle an issue I’ve been having, I’m hoping I could get pointed in the right direction. I’m working on app where users can create forms and user submit data the shape of the response is like this:
    label:”email address”,

    Because each form is unstructured data I have to create the table column array and accessors for react table on the fly. This works great until the user updates a form and adds a new field this causes the accessor to throw an error due to previous responses objects not having the field that was created. The solutions I’ve come up with so far but haven’t tested is to:

    A) Add a version number to the form whenever the form is updated and have the user select the form versions to populate the responses from this way the accessors generated will have consistent data to work with on every change.

    B ) look at the latest response attributes and use js map to add the attributes to all earlier responses before passing the data to the React table for consistency.

    C) Do B above but on the dB but I feel updating so many responses would be taxing to perform .

    I was wondering if anyone would know what would be the best solution?

    can anyone helps me ?

    Can anyone find what's the case here?

    The Action:

    export const dologin = (payload, callback) => ({
        type: publicConstants.DO_LOGIN_REQUEST,

    Where the dispatch is made:

    const mapDispatchToProps = (dispatch) => {
        return bindActionCreators( { dologin }, dispatch)
    export default connect(mapStateToProps, mapDispatchToProps)(Landpage);

    The root Saga:

    const appSagas = ([
    export default function* root() {
      yield all ([

    The case is that, while the request is done, nothing else happens - Not even the function is called. I know that I do not provide much, but if anyone has any idea, it will be much appreciated. Thanks!


    Fixed. I had to change:

    export default function* root() {
      yield all ([


    export default function* root() {
      yield all (
    Adediran babatunde
    Praful Nikam
    Is there any documentation for React web notifications? Is it possible to send notification even if the site is not running?
    Always open for feedbacks and suggestions
    Guys,how can I import React types in my global.d.ts file?
    Hi Everyone, is there any react package or an example similar to angular drag&drop boundary: https://stackblitz.com/angular/moyjdkjyojko?file=src%2Fapp%2Fcdk-drag-drop-boundary-example.ts???
    Muhammad Haseeb sohail

    Hi Everyone, is there any react package or an example similar to angular drag&drop boundary: https://stackblitz.com/angular/moyjdkjyojko?file=src%2Fapp%2Fcdk-drag-drop-boundary-example.ts???

    You can use React RND https://www.npmjs.com/package/react-rnd
    you can use its bound props to bound it to parent
    Here is the boundary example: https://codesandbox.io/s/practical-dream-jp1su?file=/src/index.js

    @muhammadhaseebsohail Thanks for help
    Om Prakash
    @yuanalexwu declare module packagename
    Hi, i'm building drum machine but trapped in an issue relating to the use of "React.useEffect(). Here is my code:
    import './App.css';
    const audioClips =  [
        keyCode: 81,
        keyTrigger: 'Q',
        id: 'Heater-1',
        url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
        keyCode: 87,
        keyTrigger: 'W',
        id: 'Heater-2',
        url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
        keyCode: 69,
        keyTrigger: 'E',
        id: 'Heater-3',
        url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'
        keyCode: 65,
        keyTrigger: 'A',
        id: 'Heater-4',
        url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3'
        keyCode: 83,
        keyTrigger: 'S',
        id: 'Clap',
        url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3'
        keyCode: 68,
        keyTrigger: 'D',
        id: 'Open-HH',
        url: 'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3'
        keyCode: 90,
        keyTrigger: 'Z',
        id: "Kick-n'-Hat",
        url: 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3'
        keyCode: 88,
        keyTrigger: 'X',
        id: 'Kick',
        url: 'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3'
        keyCode: 67,
        keyTrigger: 'C',
        id: 'Closed-HH',
        url: 'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3'
    function App() {
      return (
        <div className="App bg-info min-vh-100 text-white text-center">
          <div id="drum-machine">
            <h1>Drum Machine</h1>
            {audioClips.map(clip => {
              return <Pad key={clip.id} clip={clip} />
    function Pad({clip}){
         document.addEventListener( 'keydown', handleKeyPress);
        return ()=>{
          document.removeEventListener( 'keydown', handleKeyPress)
      const handleKeyPress= (e)=>{
        if(e.keyCode === clip.keyCode)
      const playsound=()=>{
        const audioTag = document.getElementById(clip.keyTrigger)
        audioTag.currentTime = 0;
        <div onClick= {playsound} className="drum-pad btn btn-secondary p-4 m-3">
          <audio className="clip" id={clip.keyTrigger} src={clip.url} />
    export default App;
    the console throws an error message pointing to the React.useEffect(){} in thePadfunctional component, that:'React' is not defined no-undef```. Pls how do I go about solving this?
    Corey Lewis
    @rukkho if React is undefined that means the file has no reference to what React is, and scrolling to the top of your file you'll see there is no import React from 'react'
    Thanks @cursiv3, now it works! Glad that you are there for me.
    In React hooks, is there a way to call api and do calculations before rendering the chart?. It happens only after render, any thoughts on this?
    1 reply
    Ambika Kumar
    Hello Developers,
    What is the best and secure approach to store logged-in user information in React redux application. please help me.
    1 reply
    Lemon C
    请问,react 函数式组件中,定义个 antd table 的column,column中自定义一个render渲染, render方法中以来hook中异步请求的变量,能有什么好的方式解决吗
    let [auth, setAuth] = useState([])
    let fullColumn = [{
          field: 'option',
          filterIcon: filtered => <SettingOutlined style={{ fontSize: 16, verticalAlign: -3 }} />,
          dataIndex: 'option',
          align: 'center',
          width: 60,
          fixed: 'right',
          filterDropdown: (params) => (
            <DataGrid.Setting fullColumns={fullColumns} currentColumns={currentColumns} queryParams={{ menuId: menuId, tableId: menuId }} onChange={handleChangeColumns} {...params} />
          render: (text, record) => {
            let menu = null
            menu = (
              <Menu onClick={handleMenuClick}>
                  auth.includes('ADD') && <Menu.Item key="EDIT" record={record}>
                  auth.includes('CHANGE') && <Menu.Item key="TRANSFORM" record={record}>
            return <DataGrid.Operation overlay={menu} />
       useEffect(() => {
          // 异步请求
             success: function (response) {
       }, [])
    2 replies
    Hi developers! Please I need help on how I will display the id of any key I click or press. When I click or press Q , 'Heater-1' should be displayed on the screen to describe the key pressed or clicked. pls kindly take your time to check my github repo to see/ suggest what I need to do to achieve this. I have I have been trying this for the past 1 month. I tried to use react useState hooks. I found it hard to manipulate. My github link:https://github.com/rukkho/drum-machine/blob/main/src/App.js
    Bharat Soni

    Hi guys, I'm getting error while going back to previous page after updating the redux store: https://stackoverflow.com/questions/66853904/react-dom-error-when-going-back-after-updating-the-redux-store

    can someone please help...

    Thanks my dear developers for giving me time to think this out! i actually invested more time researching on how react useState hooks actually works and lol, I finally. came up with a solution. please checkout to suggest other ways to get it done. The link::https://github.com/rukkho/drum-machine/blob/main/src/App.js. Thanks guys.
    S E R A Y A
    Hi guys
    I'm trying to figure out how to use the useDispatch hook when using the reactjs toolkit & TS
    This is my code: <button onClick={() => useDispatch({ type: 'snackbar/display' })}>REDUX</button>
    Typescript throws me "Expected 0 arguments, but got 1"
    When called, the console throws me:
    "Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
    1. You might have mismatching versions of React and the renderer (such as React DOM)
    2. You might be breaking the Rules of Hooks
    3. You might have more than one copy of React in the same app"
    any idea what I'm doing wrong? pls lmk if you need more code
    S E R A Y A
    nvm I got it to work
    the solution was to use const dispatch = useDispatch() and then using the instance dispatch({ type: 'snackbar/display' })
    I have published my article on React check out . Give a clap and Share. Open for feedback
    Szalai Laci
    @takahser Thank you for sharing
    @Prafull37 Thank you for your article.
    Hi developers on board. please help me out. I'm building a reactjs calculator. I have problem with updating the input in my handleContent(). Actually the content holds the value of all buttons. But I have problem with updating my input with the setInput . Please can anyone show/suggest how to target the value of the content so that this will display the updated input each time I press any button? please here is my github repo: https://github.com/rukkho/calculator/tree/main/src . Please try to check my gh-pages at https://rukkho.github.io/calculator/ to notice its weird performance at this stage of the build. Please I really need your help. Thanks in advance!
    Kiran Prajapati
    I think the chatrooms are dead.
    Jimin Park
    Kind of new to Redux here. Does Redux enforce state immutability and only allow updates using Reducers? Or any bad developer can just go in and start changing values in the global state if they wanted.
    Shekhar Ramola
    am I doing react set state wrongly here ?
    const changeState = (index)=>{
        const arrCopy = [...array];
        arrCopy[index].config[0].isCompleted = "true";
    Aditya Acharya
    Everyone died?? in this chatroom
    Carlos Gamboa
    Hi guys, does someone know how can i find current carret position of Div Content Editable BUT relative to the whole content (including html tags) not just the inner text.
    Ambika Kumar
    Hey Folks,
    I am trying to implement lazy loading in the existing react project but the CSS of some specific UI pages is getting break and I'm not able to find what is the exact issue with my project. So, please help me. 🙏🙏
    Prathamesh Desai
    im using this to call api
    but this thing crashes and says invalid api key altho when i hard code it it works fine
    can some one help
    Emamul Hasan
    propTypes: {
            name: PropTypes.string.isRequired,
            value: PropTypes.string.isRequired,
            onChange: PropTypes.Func.isRequired,
    For the name and value getting Parsing error: Unexpected token :eslint
    Is there a shortcut way to inject props from a parent component into a context provider value?
    Milan Vasic

    one silly question which puzzles me a bit I want to make wrapper function to do debounce for any called function, something like this
    I want to use this inside redux actions to debounce any potential call


    and myDebounce is function for whichI use deboucne-promise and tried to define it as something like

    const myDebounce = fn => debounce(fn, 100)

    but this doesn't work properly, any other way to pass parametred function? did I miss something?