by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Kevin Pinto
    @ShakurOo
    Hello here, i'm trying to testing this following statement .
    image.png
    This code is supposed to do the job BUT the value of previousContext still having the same value of the code
    previousContext comes from a custom hook which memorize previous values usePrevious like the componentDidUpdate lifecycle fn does
    Someone has an idea to force code prop to be memorized ?
    Kevin Pinto
    @ShakurOo
    Ok I found a solution but i don't like it :(
    image.png
    I force mocked usePrevious fn hook keeping the same value event when the prop has changed
    AkulaAnil
    @AkulaAnil
    how to know if particular form field valid or not using formik in reactjs
    Chaitanya
    @ChaitanyaM18
    best way to start learning react js @all ?
    1 reply
    jturner11
    @jturner11
    docs
    Kevin
    @Weasele_gitlab
    Anyone got any ideas on how I can get into a internship/jr level position somewhere that uses React?
    1 reply
    Chris Robinson
    @crob
    I am using react-redux hooks in a functional component. I am trying to find what the best practice is for this case. I have a store that is an object, its a list of items, a loading boolean, and an error property. I have a page for editing one of those items. I dispatch the updateItem action. How do I figure out in my UI that the event finished? It uses an Api middleware and dispatches actions when the call is finished, but how do you "listen" for a specific action in the UI component?
    1 reply
    would you create a separate store for specifically editing a single item?
    Eric Blade
    @ericblade
    you should have a reducer that is triggered by the action, and sets the status variable in the store
    Irfan223
    @Irfan223
    login = () => {
        const config = {
          headers: {
            'Content-Type': 'application/json'
          }
        };
        const email = this.state.userEmail;
        const password = this.state.userPassword;
        const user = {
          email: email,
          password: password
        }
        // const body = JSON.stringify(params);
        event.preventDefault();
        axios.post('http://localhost:5000/api/admin', user, config)
          .then(function (response) {
            alert(response.data);
          })
          .catch(function (error) {
            alert(error);
          });
        // window.location.reload();
      }
    I am making post request using axios but getting network error. But when I pass second argument null and third param got value in req.query not in body. please help me how to do.
    Corey Lewis
    @cursiv3
    @Irfan223 what is the network error you're receiving?
    Virgo
    @QTFYING
    hello hiys
    daksh23
    @daksh23
    @Irfan223 send Error plz
    kev
    @LxKev

    Hi, how to Pass Data from React Native to Passport.js FacebookTokenStrategy Callback?
    https://stackoverflow.com/questions/61834412/how-to-pass-data-from-react-native-to-passport-js-token-strategy-callback

    any help would be much appreciated.

    narendratech
    @narendratech

    Hi Guys,

    I am new to the react, Can any one help me how to use observable in react for making Http Get request

    Nhat Nguyen
    @nhatndm
    @narendratech redux-observable is all you need
    narendratech
    @narendratech
    @nhatndm: Thank you
    @nhatndm : Do we have any automapper in React for mapping data from service to model
    Jeff Voss
    @iamwhitebox
    hello does anyone have a recommendation for a MERN style stack boilerplate?
    I saw Hashnode's was deprecte
    deprecated
    I just want a full stack react application with authentication
    NextJS
    challarao
    @challarao
    Hello guys
    I'm wondering if there is a
    1. non-trivial example of state management combined with a real-time dashboard(ngrx is also fine)
    2. non-trivial example of a state management combined with MVVM
    Jeff Voss
    @iamwhitebox
    this channel use to be crackin does no one read anyones questions anymore
    Sten-H
    @Sten-H
    Hey everyone. I'm trying to create some derived state with reselect that is basically like a flag for if a value in state { invalidInputCount: number } has changed. Do I need to access the previous value to do this? and can I get access to that from the selector?
    1 reply
    dfsa-bot
    @dfsa-bot
    narendratech
    @narendratech

    Hi Guys,

    How to use observable instead of state in React Components

    Surajit Basak
    @techcetblog_gitlab

    Hi there, I have a question on redux.

    Does redux remembers state when browser is closed?

    Diego Aguilar Aguilar
    @diegoaguilar
    not really @techcetblog_gitlab you'd need to use a persistence tool for Redux

    Please consider these are two separate things.

    • One is how redux helps keeping state during your application life span. (and ALL redux concepts and philosophy within)
    • On the other hand, you are looking for a way to keep that state persisted in a kind of "long term storage". This is indepentend from Redux.

    It's also truth, though, that these 'storage' libs can be used as a Redux middleware.

    kev
    @LxKev
    Hi, how can i simulate internet connection on react native ios simulator? https://stackoverflow.com/questions/62040164/how-to-simulate-internet-connection-on-react-native-ios-simulator
    Emamul Hasan
    @emamcoder
    Hi Guys,
    I am facing an issue in react, it says
    Uncaught TypeError: Cannot read property 'errors' of undefined
        at Login (Login.js:28)
        at renderWithHooks (react-dom.development.js:14803)
        at mountIndeterminateComponent (react-dom.development.js:17482)
        at beginWork (react-dom.development.js:18596)
        at HTMLUnknownElement.callCallback (react-dom.development.js:188)
        at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
        at invokeGuardedCallback (react-dom.development.js:292)
        at beginWork$1 (react-dom.development.js:23203)
        at performUnitOfWork (react-dom.development.js:22154)
        at workLoopSync (react-dom.development.js:22130)
        at performSyncWorkOnRoot (react-dom.development.js:21756)
        at scheduleUpdateOnFiber (react-dom.development.js:21188)
        at updateContainer (react-dom.development.js:24373)
        at react-dom.development.js:24758
        at unbatchedUpdates (react-dom.development.js:21903)
        at legacyRenderSubtreeIntoContainer (react-dom.development.js:24757)
        at Object.render (react-dom.development.js:24840)
        at Module../src/index.js (index.js:10)
        at __webpack_require__ (bootstrap:784)
        at fn (bootstrap:150)
        at Object.1 (serviceWorker.js:141)
        at __webpack_require__ (bootstrap:784)
        at checkDeferredModules (bootstrap:45)
        at Array.webpackJsonpCallback [as push] (bootstrap:32)
        at main.chunk.js:1
    Login @ Login.js:28
    renderWithHooks @ react-dom.development.js:14803
    mountIndeterminateComponent @ react-dom.development.js:17482
    beginWork @ react-dom.development.js:18596
    callCallback @ react-dom.development.js:188
    invokeGuardedCallbackDev @ react-dom.development.js:237
    invokeGuardedCallback @ react-dom.development.js:292
    beginWork$1 @ react-dom.development.js:23203
    performUnitOfWork @ react-dom.development.js:22154
    workLoopSync @ react-dom.development.js:22130
    performSyncWorkOnRoot @ react-dom.development.js:21756
    scheduleUpdateOnFiber @ react-dom.development.js:21188
    updateContainer @ react-dom.development.js:24373
    (anonymous) @ react-dom.development.js:24758
    unbatchedUpdates @ react-dom.development.js:21903
    legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
    render @ react-dom.development.js:24840
    ./src/index.js @ index.js:10
    __webpack_require__ @ bootstrap:784
    fn @ bootstrap:150
    1 @ serviceWorker.js:141
    __webpack_require__ @ bootstrap:784
    checkDeferredModules @ bootstrap:45
    webpackJsonpCallback @ bootstrap:32
    (anonymous) @ main.chunk.js:1
    index.js:1 The above error occurred in the <Login> component:
        in Login (created by ConnectFunction)
        in ConnectFunction (at App.js:7)
        in App (at src/index.js:13)
        in StrictMode (at src/index.js:12)
        in Provider (at src/index.js:11)
    Emamul Hasan
    @emamcoder
    here is the Login component
    import React, { useState } from "react";
    import { Container, Row, Col, Image, Form, Button } from "react-bootstrap";
    import { connect } from "react-redux";
    
    const Login = (props) => {
      const [email, setEmail] = useState("");
      const [password, setPassword] = useState("");
      return (
        <div className="Login">
          <div className="LoginLeftPanel">
            <Container>
              <Row>
                <Col xs={6} md={4}>
                  <Image src="holder.js/171x180" thumbnail />
                </Col>
              </Row>
            </Container>
          </div>
          <div className="LoginRightPanel">
            <Form>
              <h2>Login</h2>
              <hr />
              <Form.Group controlId="formBasicEmail">
                <Form.Label>Email address</Form.Label>
                <Form.Control
                  type="email"
                  placeholder="Enter email"
                  isInvalid={props.loginForm.errors.email.length > 0}
                  isValid={
                    props.loginForm.values.email &&
                    props.loginForm.errors.email.length === 0
                  }
                  onChange={(e) => setEmail(e.target.value)}
                />
                <Form.Control.Feedback type="invalid">
                  {props.loginForm.errors.email}
                </Form.Control.Feedback>
                <Form.Text className="text-muted">
                  We'll never share your email with anyone else.
                </Form.Text>
              </Form.Group>
    
              <Form.Group controlId="formBasicPassword">
                <Form.Label>Password</Form.Label>
                <Form.Control
                  type="password"
                  placeholder="Password"
                  isInvalid={props.loginForm.errors.password.length > 0}
                  isValid={
                    props.loginForm.values.password &&
                    props.loginForm.errors.password.length === 0
                  }
                  onChange={(e) => setPassword(e.target.value)}
                />
                <Form.Control.Feedback type="invalid">
                  {props.loginForm.errors.password}
                </Form.Control.Feedback>
              </Form.Group>
              <Form.Group controlId="formBasicCheckbox">
                <Form.Check type="checkbox" label="Check me out" />
              </Form.Group>
              <Button
                variant="primary"
                type="button"
                onClick={() =>
                  props.dispatch({
                    type: "FORM_SUBMIT",
                    payload: { email, password },
                  })
                }
              >
                Login
              </Button>
            </Form>
          </div>
        </div>
      );
    };
    
    const mapStateToProps = (state) => ({
      loginForm: state.Login,
    });
    
    export default connect(mapStateToProps)(Login);
    And here is reducer
    import * as types from "../Actions/ActionTypes";
    
    function validateEmail(email) {
      var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(String(email).toLowerCase());
    }
    
    const initialState = {
      loginForm: {
        values: {
          email: "",
          password: "",
        },
        errors: {
          email: "",
          password: "",
        },
      },
    };
    
    const setErrors = (email, password) => {
      let errors = { email: "", password: "" };
      if (!email && email.length === 0) {
        errors.email = "Email is required";
      } else if (!validateEmail(email)) {
        errors.email = "Email is invalid";
      }
      if (!password && password.length === 0) {
        errors.password = "Password is required";
      } else if (password.length < 8) {
        errors.password = "Password must have 8 characters";
      }
      return errors;
    };
    
    export default function LoginReducer(state = initialState, action) {
      switch (action.type) {
        case types.Login:
          const { email, password } = action.payload;
          const values = {
            email,
            password,
          };
          const errors = setErrors(email, password);
          return {
            loginForm: {
              values,
              errors,
            },
          };
        default:
          return state;
      }
    
      //   if (action.type === "FORM_SUBMIT") {
      //     const { email, password } = action.payload;
      //     const values = {
      //       email,
      //       password,
      //     };
      //     const errors = setErrors(email, password);
      //     return {
      //       loginForm: {
      //         values,
      //         errors,
      //       },
      //     };
      //   }
      //   return state;
    }
    Robert Main
    @robertmain__twitter
    Hi folks
    Surajit Basak
    @techcetblog_gitlab

    @diegoaguilar actually I am developing a pos system using Slim PHP framework as an API and react js as a frontend. When I tried to see what happened if I close the browser after login in to admin dashboard, I saw it preserved my previous store objects. And here is the store configuration:

    ```jsx

    import { combineReducers, compose, createStore, applyMiddleware } from "redux";
    import thunk from "redux-thunk";
    
    import authentication from "./reducers/authentication";
    import alert from "./reducers/alert";
    
    const initialState = {};
    
    const middleware = [thunk];
    
    const reducers = combineReducers({
      auth: authentication,
      alert,
    });
    
    const store = createStore(
      reducers,
      initialState,
      compose(
        applyMiddleware(...middleware),
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
      )
    );
    
    export default store;
    Nav Saini
    @navxio
    hi all!! are the dom changes made by react visible to mutation observer?
    Istvan Fulop
    @istvandesign
    Hey guys, how the hell are you supposed to test hooks with jest ? Most articles use only a single useState and don't explain how to do multiple ones.
    Sujan Basnet
    @SBasnet24
    I am calling this addPost method which is in my context for serving multipart data to the server,,, but after clicking on onSubmit it keeps on reloading the same page and doesnot move to the url that I specified ?????? the data is posted to server but the page keeps reloading to same url