Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
    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
    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>,
    does anyone here experience integration ms 365 on a reactjs app? that lets you modify and save file?
    ishu mishra
    @JanDez_gitlab what's your error?
    Shekhar Ramola
    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

    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);
    homeFeatures: features

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

    export function Section() {
    return (
    { 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}>

                                <a href="/" className="btn btn-secondary">Start doing</a>
                            <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" />
            } }

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

    DeVon Jackson
    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
    @ortoncee on console.log(value), what was output?
    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
    any idea how to reset form back to empty values in formik anyone ?
    hi guys can i use reactjs to my frontend and ruby on rails in my backend?
    Corey Lewis
    Formik gives a function on props called resetForm()
    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 :)
    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
    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ć
    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ć
    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
    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?