Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
    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
    anyone here?
    Having some issues with Error Boundaries not working when I throw an error...componentDidCatch() is not being triggered
    @CodeLiftSleep Code?
    Matt Erman
    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>{
            this.state = {
                hasError: false,
                alertOpen: true
        componentDidCatch(e: any) {
                hasError: true
                //error: e
          closeAlert() {
            this.setState({alertopen: false, hasError: false})
          //render the error screen
          render() {
                  var msg = "Oops! Something went wrong. Error:  " + this.props.error.toString();
                  var title = "Error in " + this.props.info.componentStack;
                            title = {title}
                            message= {msg}
                            closeAlert={() => this.closeAlert()}
          return this.props.children;
     render() {
        if(this.state.error)  throw new Error(this.state.dataError);
        return (
          <div >
    Matt Erman
    hmm...now I am getting the info component but not the error component
    Matt Erman
    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
    Who are using redux-model-ts? It's based on redux and typescript. With 100% type checking and 50% code reduce.
    Seyyid Fatih KOÇ
    Hello to everyone!! :wave:
    I built new project, you might be interested.
    You can check this out : https://github.com/sfatihk/react-world
    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
    Does anyone have simple login logout form using react redux-saga ? Any Github Link?
    Chol Nhial
    Hi all, How can I best break up my react app into: Admin-Dashboard and MainWebsite?
    Bhoomi Khanderia
    @cholnhial Yes you can
    Chol Nhial
    @bhoomikhanderia I have been able to achieve it using nested routes
    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?
    Dont use React. i was highly burned by it
    Miguel Murillo
    Mao Ito

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


    Arnas Fomenko
    Hello, can anyone share an idea on how to get exact path in a component, nested in BrowserRouter?
    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]) {
              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
    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
    Hi coine laps
    Hi, I'm currently working on a project for using hooks to build store tree in React apps. https://awmleer.github.io/reto
    @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
    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
    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).
    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>(
            {variables: {name: "default"}}
        useEffect(() => {
            const onCompleted = (data) => { console.log(data.event.cal) };
            const onError = (error) => { /* magic */ };
            if (onCompleted || onError) {
                if (onCompleted && !loading && !error) {
                } else if (onError && !loading && error) {
            }, [loading, data, error]);
            {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}/>

    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...

    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!
    Tomasz O.
    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.
    Suraj Gupta
    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/
    @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)

    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
    Maybe HOC can help
    Or React.cloneElement
    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
    I don’t understand what are you trying to do
    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
    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??
    Manoj Kumar
    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.