Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    TamashiKaizenカイゼン
    @TamashiKaizen
    Hi, how to Animate Color of Header Back Button in React Native React Navigation 5? https://stackoverflow.com/questions/63644630/how-to-animate-color-of-header-back-button-in-react-native-react-navigation-5
    JanDez
    @JanDez_gitlab
    Hi, i'm new in React and i've dealing with this error:
       6 | import 'bootstrap/dist/css/bootstrap.css';
       7 | import Counter from './components/counter';
       8 | 
    >  9 | ReactDOM.render(
      10 |   <React.StrictMode>
      11 |     <App />
      12 |   </React.StrictMode>,
    HumbleCarl
    @HumbleCarl
    does anyone here experience integration ms 365 on a reactjs app? that lets you modify and save file?
    ishu mishra
    @coderishu
    @JanDez_gitlab what's your error?
    Shekhar Ramola
    @shekharramola
    browser back button is redirecting me to home page directly when I am going from home page to vouchers to voucher details and the clicking browser back button
    shouldn't it redirect me to vouchers page?
    Agu Emmanuel Chukwuwemeka Orton
    @ortoncee

    hey guys, help here pls....

    export default [
    {
    workTeam: {
    title: "Work with any team",
    description: "Whether it’s for work, a side project or even the next family vacation, Trello helps your team stay organized.",
    image: teamTasks
    },
    infosGlance: {
    title: "Information at a glance",
    description: "Dive into the details by adding comments, attachments, due dates, and more directly to Trello cards. Collaborate on projects from beginning to end.",
    image: infoGlance
    },
    autoButler: {
    title: "Built-In Workflow Automation With Butler",
    description: "Let the robots do the work! Boost productivity by unleashing the power of automation across your entire team with Butler, and remove tedious tasks from your to-do lists with:",
    image: Butler,
    lists: [
    'Rule-Based Triggers',
    'Custom Card & Board Buttons',
    'Calendar Commands',
    'Due Date Commands'
    ]
    }
    },
    ];

    state = {
    homeFeatures: [],
    workTeam: {}
    };

    formatData(items) {
    let tempItems = items.map(item => {
    //
    let features = { ...item };
    return features;
    });
    return tempItems;
    }

    componentDidMount() {
    let features = this.formatData(items);
    this.setState({
    homeFeatures: features
    });
    }

    render() {
    // console.log(this.state.homeFeatures[0] );
    return (
    <Context.Provider value={{...this.state}} >
    {this.props.children}
    </Context.Provider>
    )
    }

    export function Section() {
    return (
    <Consumer>
    { value => {
    const [ workTeam, , ] = value;
    // console.log(value);
    return (
    <div className="container" style={{margin: '.4em auto'}}>
    <div className="row d-flex align-items-center" style={{padding: '4em 0em'}}>
    <div className="col-12 col-md-6 py-4">
    {workTeam.map((item ,index) => (
    <div key={index}>
    <h4>{item.title}</h4>
    <p>{item.description}</p>
    </div>

                                    ))}
                                <a href="/" className="btn btn-secondary">Start doing</a>
                            </div>
                            <div className="col-12 col-md-6 py-4" >
                                {workTeam.map((item, index) => (
                                    <img key={index} className="img-fluid img-responsive" src={item.image}  alt="Team Tasks" />
                                ))}
                            </div>
                        </div>
                    </div>
                )
            } }
        </Consumer>

    PLEASE GUYS... I try to access this but it was throwing an error of...
    TypeError: Cannot read property 'workTeam' of undefined

    DeVon Jackson
    @devo-wm
    hello all! using redux toolkit to createAsyncThunk and I'm wondering if there's a way to dispatch the thunk with an action in the shape of
    { type: "thunk/name", payload: expectedPayload}
    Ronak Sonigara
    @ronaksonigara
    @ortoncee on console.log(value), what was output?
    Alfred-Mountfield
    @Alfred-Mountfield
    Hi guys,
    Anyone have any ideas how, if I allow my users to save their store as a JSON file, I would then be able to replace the local state with that file if they enter it in an input/upload it? (I am using redux-persist just in case that makes it easier/harder)
    Shamseer Ahammed
    @shamseerahammedm
    any idea how to reset form back to empty values in formik anyone ?
    gerome0123
    @gerome0123
    hi guys can i use reactjs to my frontend and ruby on rails in my backend?
    Corey Lewis
    @cursiv3
    @shamseerahammedm
    Formik gives a function on props called resetForm()
    gerome0123
    @gerome0123
    hi guys i watch react in YT i saw that html can be done in JS side is this normal???
    is that the way it is?? and is that the best practice for that? or safe? can someone explain to me thanks :)
    Donny2100
    @Donny2100
    We are currently finding a remote worker based in US.
    This is part-time job(about 5-10 hours a week). Please skype me if you are interested. Thanks. live:.cid.c6abec7ad129c86f
    Heet Surana
    @heet-2312
    Any idea how or any good resources on how to link react components with redux for authentication i am facing a lot of issue for my project
    Storing jwt tokens and other things.
    Mile Mijatović
    @mijatovicmile
    Hello everyone
    Can you help me how render a list of Char Components where each Char component receives a different letter of the entered text as a prop
    I know that I need to use .map(char => { return <Char character={char} /> }
    but how to use return into return again ?
    I just started learning ReactJS
    Mile Mijatović
    @mijatovicmile
    Error in /~/src/App.js (58:34)
    userInputState.userInput.map is not a function
    please see updated version of my example
    Anyone can explain what's wrong here ?
    Mohammad Amin Najafi
    @manvfx
    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(() => {
        dispatch(scheduleActions.getById(scheduleId));
        setData(schedule)
      }, []);
    Tevon Davis
    @TevoDavis_twitter

    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:
    {
    email_ghe73hs:{
    label:”email address”,
    value:”foo@bar.com”}}

    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?

    Ghost
    @ghost~5ea6ca61d73408ce4fe1d4e5
    can anyone helps me ?
    GeorgePals
    @GeorgePals

    Can anyone find what's the case here?

    The Action:

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

    Where the dispatch is made:

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

    The root Saga:

    const appSagas = ([
      ...publicSagas,
    ])
    
    export default function* root() {
      yield all ([
        appSagas
      ])
    }

    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!

    GeorgePals
    @GeorgePals

    Fixed. I had to change:

    export default function* root() {
      yield all ([
        appSagas
      ])
    }

    to

    export default function* root() {
      yield all (
        appSagas
      )
    }
    Adediran babatunde
    @adebabs7_twitter
    Hi
    Praful Nikam
    @Praful-cs
    Is there any documentation for React web notifications? Is it possible to send notification even if the site is not running?
    Prafull37
    @Prafull37
    Always open for feedbacks and suggestions
    sam
    @yuanalexwu
    Guys,how can I import React types in my global.d.ts file?
    5P4RK3R
    @5P4RK3R
    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
    @muhammadhaseebsohail

    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

    5P4RK3R
    @5P4RK3R
    @muhammadhaseebsohail Thanks for help
    Om Prakash
    @prakash32596
    @yuanalexwu declare module packagename
    rukkho
    @rukkho
    Hi, i'm building drum machine but trapped in an issue relating to the use of "React.useEffect(). Here is my code:
    rukkho
    @rukkho
    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} />
            })}
          </div>
        </div>
      );
    }
    
    
    function Pad({clip}){
    
     React.useEffect(()=>{
         document.addEventListener( 'keydown', handleKeyPress);
        return ()=>{
          document.removeEventListener( 'keydown', handleKeyPress)
        }
    
      },[]) 
    
      const handleKeyPress= (e)=>{
        if(e.keyCode === clip.keyCode)
        playsound();
      }
      const playsound=()=>{
        const audioTag = document.getElementById(clip.keyTrigger)
        audioTag.currentTime = 0;
        audioTag.play()
      }
      return(
        <div onClick= {playsound} className="drum-pad btn btn-secondary p-4 m-3">
          <audio className="clip" id={clip.keyTrigger} src={clip.url} />
          {clip.keyTrigger}
        </div>
      )
    }
    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
    @cursiv3
    @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'
    rukkho
    @rukkho
    Thanks @cursiv3, now it works! Glad that you are there for me.
    5P4RK3R
    @5P4RK3R
    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?