Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    DaveVaughan
    @DaveVaughan
    probably that a react hook will only work inside a react functional component or class component, they aren't available in a generic js function and require the React lib to be attached to the object.
    Matt Erman
    @CodeLiftSleep
    anyone here?
    Having some issues with Error Boundaries not working when I throw an error...componentDidCatch() is not being triggered
    :]
    @elcolie
    @CodeLiftSleep Code?
    Matt Erman
    @CodeLiftSleep
    I am getting to hit the error boundary now but its not passing any of the error data to it
    export class Errors extends Component<any,IState>{
        constructor(props:any){
            super(props);
            this.state = {
                hasError: false,
                alertOpen: true
            };
        }
    
        componentDidCatch(e: any) {
            this.setState({
                hasError: true
                //error: e
            });
        }
    
          closeAlert() {
            this.setState({alertopen: false, hasError: false})
        }
          //render the error screen
          render() {
              if(this.state.hasError){
                  var msg = "Oops! Something went wrong. Error:  " + this.props.error.toString();
                  var title = "Error in " + this.props.info.componentStack;
              return(
                <div>
                    <React.Fragment>
                        <AlertDialogSlide
                            open={this.state.alertOpen}
                            title = {title}
                            message= {msg}
                            closeAlert={() => this.closeAlert()}
                            error={true}
                        >     
                        </AlertDialogSlide>
                    </React.Fragment>
                </div>
              )
          }
          return this.props.children;
        }
    
    }
     render() {
        if(this.state.error)  throw new Error(this.state.dataError);
        return (
          <div >
    Matt Erman
    @CodeLiftSleep
    hmm...now I am getting the info component but not the error component
    Matt Erman
    @CodeLiftSleep
    Now its working but then I get an error because I am not catching the thrown error in the above render state, but then when I do catch the error another error pops up and says I am not returning anything from the render function
    原罪
    @fwh1990
    Who are using redux-model-ts? It's based on redux and typescript. With 100% type checking and 50% code reduce.
    Seyyid Fatih KOÇ
    @sfatihk
    Hello to everyone!! :wave:
    I built new project, you might be interested.
    You can check this out : https://github.com/sfatihk/react-world
    alliptvtv
    @alliptvtv
    All IPTV is a program for converting m3u / m3u8 playlists of any iptv provider into a plugin for viewing iptv on Dune HD Players. https://slev7nm.github.io/all-iptv-dune-plugin/
    Bhoomi Khanderia
    @bhoomikhanderia
    Does anyone have simple login logout form using react redux-saga ? Any Github Link?
    Chol Nhial
    @cholnhial
    Hi all, How can I best break up my react app into: Admin-Dashboard and MainWebsite?
    Bhoomi Khanderia
    @bhoomikhanderia
    @cholnhial Yes you can
    Chol Nhial
    @cholnhial
    @bhoomikhanderia I have been able to achieve it using nested routes
    fredski02
    @fredski02
    doing an es6 async await action creator in redux. It's saying the return needs to be a plain object. I'm assuming redux doesn't like Promises as async await is essentially syntactical sugar for promises.......right?
    kapilpipaliya
    @kapilpipaliya
    Dont use React. i was highly burned by it
    Miguel Murillo
    @dotmaike
    O.o
    kapilpipaliya
    @kapilpipaliya
    yes
    Mao Ito
    @mmaioe

    Graph Design UI by React (for Machine Learning) - Graphical Model Lab

    https://github.com/GraphicalModelLab/GML_SaaS

    Arnas Fomenko
    @arnasfomenko
    Hello, can anyone share an idea on how to get exact path in a component, nested in BrowserRouter?
    crapthings
    @crapthings
    hello i want to make decorator chainable, how to do it ?
    import React, { createElement, createFactory } from 'react'
    import hoistNonReactStatics from 'hoist-non-react-statics'
    
    const universe = {}
    
    const withConnectToOtherComponent = componentName => {
    
      if (!componentName) throw 'componentName required'
    
      const hoc = WrappedComponent => props => {
    
        if (!WrappedComponent.prototype.isReactComponent) {
          return WrappedComponent(props)
        }
    
        class WrapperComponent extends WrappedComponent {
    
          componentDidMount() {
            if (universe[componentName]) {
              console.error(universe[componentName])
              throw `componentName must be unique, ${componentName} is in use`
            }
    
            universe[componentName] = this
            this.connect = name => {
              if (Object.prototype.toString.call(name) === '[object String]') {
                return universe[name]
              } else if (Object.prototype.toString.call(name) === '[object Array]') {
                const ref = {}
                for (const _name of name) {
                  ref[_name] = universe[_name]
                }
                return ref
              } else {
                return universe
              }
            }
    
            if (WrappedComponent.prototype.componentDidMount) {
              WrappedComponent.prototype.componentDidMount.apply(this, arguments)
            }
          }
    
          componentWillUnmount() {
            delete universe[componentName]
            if (WrappedComponent.prototype.componentWillUnmount) {
              WrappedComponent.prototype.componentWillUnmount.apply(this, arguments)
            }
          }
    
        }
    
        return createElement(WrapperComponent, props)
    
      }
    
      return hoc
    
    }
    
    export default withConnectToOtherComponent
    it doesn't work with other decorator
    akkonrad
    @akkonrad
    hey, I'm using formik. I want to add FieldArray compoennt with dynamic content, that could be changed from the outside. unfortunately, the setFieldValue function is only available from the form body. so my question is, how to be able to modify the values property from the outside of the <Formik> component?
    Dagmwie tekea
    @dagmwie_twitter
    Hi coine laps
    awmleer
    @awmleer
    Hi, I'm currently working on a project for using hooks to build store tree in React apps. https://awmleer.github.io/reto
    ES
    @easeq
    @akkonrad you can use this: https://github.com/flipbyte/formik-json-schema. It allows you to add an onChange handler which receives formik props.
    Arye Shalev
    @pantchox
    Hi guys, who ever has a blog or post on Medium stuff that are related to programming, I am working on a new publishing platform, its my side project and i worked reallllly hard on it - I would love for your feedback! if you love publishing and curating content - PLEASE PM ME :)
    if my message is not following chat room rules i will delete it! thanks.
    Nicholas Cloud
    @nicholascloud
    I'm having some problems using an array of objects with the useState() hook. I'm trying to push an object onto the front of the array, so that when the component is re-rendered it appears at the beginning of the list, not the end, but it always appears at the end, regardless. I've logged the actual data that comes back from the useState() hook, and it is always in the correct order, but when the component renders, it always appends an input instead of prepending it. Here is a (simplified) example: https://gist.github.com/nicholascloud/69e228d9744100539619dd9759aff08b.
    If I call setData([]) with an empty array, immediately followed by a setTimeout(() => setData(newData)); then the order is preserved, but there is a delay, and the page jumps (because it initially clears out the component entirely, changing the length of the page).
    Luke-VideoLibre
    @LukeVideo
    Hy, Any react with typescript heads here ?

    I'm using typescript with react in an ionic app. I am totally new to TS and bump into an issue i can't solve. I hope someone here can help.

    export default function WidgetContainer() {
        const [mix, setMix] = useState(10);
        const [cal, setCal] = useState(3);
        const [distance, setDistance] = useState(20)
    
    
        const {loading, data, error} = useQuery<EventData, EventVars>(
            GET_EVENT,
            {variables: {name: "default"}}
            );
    
        useEffect(() => {
            const onCompleted = (data) => { console.log(data.event.cal) };
            const onError = (error) => { /* magic */ };
            if (onCompleted || onError) {
                if (onCompleted && !loading && !error) {
                onCompleted(data);
                } else if (onError && !loading && error) {
                onError(error);
                }
            }
            }, [loading, data, error]);
    
    
    
        return(
            <div>
            {loading ? (
                <p>Loading ...</p>
            ) : (
                <div className="WidgetContainer">
                    <Widget unit="km" count= {distance} picto={picto_km}/>
                    <Widget unit="cal" count= {cal} picto={picto_kcal}/>
                    <Widget unit="mix" count= {mix} picto={picto_mix}/>
                </div>)}
            </div>
            )
    
        }

    doesn't compile....

    Parameter 'data' implicitly has an 'any' type.  TS7006
    
        65 | 
        66 |     useEffect(() => {
      > 67 |         const onCompleted = (data) => { console.log(data.event.cal) };
           |                              ^
        68 |         const onError = (error) => { /* magic */ };
        69 |         if (onCompleted || onError) {
        70 |             if (onCompleted && !loading && !error) {

    I tried adding <eventData> here and there but had no luck...

    @FadiDev
    @fadidevv
    Hi everyone, i have created Facebook Login component for React Native IOS/Android because i face many problems like other developer when i link native facebook sdks to my React Native apps please try it and fork, star it. Thanks much!
    https://github.com/fadidevv/react-native-fblogin
    :)
    Tomasz O.
    @0wczar
    Hi guys, I just released my dashboard based on Bootstrap 4 and React 16 - Airframe. It is available as Open Source (MIT License). I will be grateful for the feedback. Repo: https://github.com/0wczar/airframe-react Thanks.
    aiframe-1280x640-social
    Suraj Gupta
    @surajprgupta
    Hello I need some help regarding react component, can anyone give me some kisckstart about how can I use react component in plain html pages, I have created a sample component using this - https://neutrinojs.org/packages/react-components/
    Devin
    @demitchell14
    @0wczar If I'm being honest, I wish I found this about 2 months ago when I started working on a new project of mine. It would have saved me $30 (because I was too lazy to build a dashboard myself and purchased a license for one instead)
    Devin
    @demitchell14

    Is there a way for one rendered element to reference another rendered element outside of react itself, but use react functionality? -- What I mean is this...

    ReactDOM.render(<Calendar listRef={ListRef} />, {id1});
    
    ReactDOM.render(<List />, {id2});

    Is there some way to create this ListRef reference outside of React?

    Miguel Murillo
    @dotmaike
    Maybe HOC can help
    Or React.cloneElement
    Devin
    @demitchell14
    Well one thing I thought about was having a global refs object that holds the references, and I set the ref to that global ref.. but its kind of quirky.
    Miguel Murillo
    @dotmaike
    I don’t understand what are you trying to do
    Devin
    @demitchell14
    Well I have multiple entry points for multiple types of react components that are independent from each other. By independent, I mean, they don't actually require each other. However, two of them are related, if they are both present on the page. -- I have a list component that I need to be able to execute a function on a calendar component (if they are both present).
    A solution, would be to create a wrapper component that displays both of them together, but I want to try to avoid that if possible.
    This isn't a conventional react app, if you couldn't tell already, haha
    Devin
    @demitchell14
    I actually think I figured out exactly what I need -- ReactDOM.render() returns the instance which is what I need to reference I believe, so in theory, I could store that instance somewhere to reference??
    https://stackblitz.com/edit/react-uaybtb
    Manoj Kumar
    @napestershine
    Andrey
    @avkonst
    Hi everybody, I have discovered an interesting trick in React, which allowed me to update the state of a table with 10000 cells at the speed of more than 1 cell per every millisecond! I thought that it is an very powerful technique, which is not exploited by any of the popular state management libraries. So, I have put some effort to come up with the generic version of the library for modern, high-performance, no-boilerplate state management in react. It is Hookstate and the performance demos are for huge table grid and huge form. I appreciate if you could review it and provide me some feedback. I am interested in to know if it useful and how it could be improved and brought up to the next level.