Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Feb 05 2017 13:29
    @listochkin banned @byhub
  • Sep 27 2016 12:16
    @listochkin banned @vsevolodg
  • Mar 17 2016 14:10
    User @ALF-er unbanned @xgrommx from this room
  • Mar 17 2016 14:10
    User @ALF-er unbanned @chicoxyzzy from this room
  • Mar 17 2016 14:06
    @ALF-er banned @xgrommx
  • Mar 17 2016 14:06
    @ALF-er banned @chicoxyzzy
  • Jan 03 2016 23:34
    @RReverser banned @vasivas
  • Mar 27 2015 20:23
    User @RReverser banned @doneck-russia from this room
  • Mar 19 2015 20:58
    User @mr-mig banned @pgr-ru from this room
  • Mar 14 2015 23:15
    User @mr-mig banned @putin-hero from this room
  • Mar 14 2015 22:29
    User @mr-mig banned @stepan-bendera from this room
Jason Chong
@meljason

Hey guys, I am doing a fetch data from firebase (real-time database) but the my application does not render the new data added to the database. I have to reload my app for it to appear. I am guessing that it is in my useEffect. How do I solve it?

Currently I have this:

useEffect(() => {
var appointmentsRef = firebase
.database()
.ref('/client_appointments/' + PROJECT_CODE.projectCode);

            appointmentsRef
                .orderByChild('createrID')
                .equalTo(currentUserId)
                .once('value', (snapshot) => {
                    var upcomingAppointments = [];

                    ...

setUpcomingDb([upcomingAppointments]);
});
}
});
}, []);

Hey guys, I am doing a fetch data from firebase (real-time database) but the my application does not render the new data added to the database. I have to reload my app for it to appear. I am guessing that it is in my useEffect. How do I solve it?

Currently I have this:
`
useEffect(() => {
var appointmentsRef = firebase
.database()
.ref('/client_appointments/' + PROJECT_CODE.projectCode);

            appointmentsRef
                .orderByChild('createrID')
                .equalTo(currentUserId)
                .once('value', (snapshot) => {
                    var upcomingAppointments = [];

                    ...

setUpcomingDb([upcomingAppointments]);
});
}
});
}, []);
`

jcapil-ictdu
@jcapil-ictdu
How to fetch data without using setTimeout?
useEffect(() => {
          setTimeout(() => {
        const fetchData = async () => {
            let res = await getLatest();
            setState(res['data'].data)
        }
        fetchData();
           })
    }, [])
Cause when I remove the setTimeout, I'm getting an error which is Request failed with status code 500
Jason Chong
@meljason
Hey guys I have two functional components and I wanna send data from component A to B. Component A gets data from firebase which needs to be passed in the useEffect function in component B. What would you suggest to do? is history.push a good method to do it?
fantoh
@fantoh
Hey guys I am looking for a library which represents bubble, which one do you recommend?
I tried with ZoomableBubbleChart but it seems not working or did I do something wrong?
ItEdge70
@ItEdge70
Hi Guys I wanna do my final year project on React Native. Please tell me some ideas that are current in demand
Daniel Shamany
@dshamany
Hey guys, how do you prevent nodemon or npm start from refreshing in a new tab?
Zerka1982
@Zerka1982
@ItEdge70
Books App.
Expense Tracker.
Recipes app. ...
Deals App in React Native.
  1. News App.
    Friends Around Me app.
    Radio/Music app.
    Note-Taking App.
@dshamany you can install an extension to your Editor such as Live Server. For nodemon, as long as it is up running, you won't need to restart the server over and over
Daniel Shamany
@dshamany
@Zerka1982 Thank you for the reply. My issue is that the refresh occurs in a different tab as opposed to being refreshed on the same tab.
Joakim
@joakimgk
Using Axios to interface a .net API (backend). I want to make a checkbox for testers, which (if checked) will intercept and change any HTTP responses to, say, 500 errors. This is to test the error handling in the frontend. Is there any way to "create" a fake error object -- and I don't mean within a test context
I have something like this in mind: Store the checkbox value (boolean) in "global state", and have the Axios client.js check this and create some mock 500 mock error object in return. This way, the frontend services and the components "using" these (SWR) will respond properly
sanjay390
@sanjay390
How to load large database so that entire database does not load on one page and our app is run well in React js
Mario Iliev
@mario-iliev
Hey guys. Recently I published easy to use but also flexible global state manager. Removes all the hustle from Redux based state managers.
https://www.npmjs.com/package/store-me
I really hope it'll be useful to you!
Gaurav Gupta
@gauravgupta98
Gus, I've been working on React and built a WhatsApp Web clone. Checkout the demo here - https://whatsapp-clone-36b61.web.app/
If you have any suggestions or you liked it or want to contribute then checkout the GitHub repo here - https://github.com/gauravgupta98/whatsapp-clone
Don't be lazy to give a star ;)
Jason Chong
@meljason

Hey guys, I have a question. I have a component that is rendering 6 objects from Firebase. And when I click on the object, it renders multiple checkbox items and they have a price attached to it. But the problem is I want to get the total price of the checkboxes for each of the 6 objects.

The problem is because the rendered component (with checkboxes) is dynamic, how do I set the state for the total price for each of the 6 components?

Jason Chong
@meljason
So basically I have a parent component that renders items from Firebase. Then when I click in each individual object, it renders the child component which have multiple checkboxes generated from Firebase too. The checkboxes have a price label and I need to get the total price of the checked boxes.
Jason Chong
@meljason

Okay, so what I have is a parent component called A and a child component called B. What A does is list a list of Products Categories (retrieved from Firebase) which are each clickable. Then I have child component B. It is shown when one of the product category is clicked. So component B appears over component A when a product category is clicked.

When you click on a product category in component A, a list of of product for that category is listed (from Firebase) along with checkboxes next to them. When I click on the checkboxes, it should sum the prices of the products and display the sum on top of the component B and A. So I want each product category to have the total price displayed next to them.

The issue I am having is how do I display the total price for each product category based on the checkboxes in component B? What is the best approach to this?

PS: I am using functional component

softdeveloper
@pedro-danes
I have get error with React. I need help.
Baruch Yochai
@baruchyochai

Hi Everyone,

Error: Couldn't find a style target. How to fix it?

I had a CSR app and now implemented Server-Side Rendering (SSR) with React, and get this error

Error: Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid

Get this error when I run the server and try to access the page.
Tech sack in use: nodejs, reactjs, antdesign, babel and webpack.
I already tried a lot of solutions from StackOverflow and other sources, nothing helped! Please, help me to solve it.

Thank you!

1 reply
rodhoff
@rodhoff
Hi all... does anyone have recomendations about any free React Package for developing a chat app? Any that you have already used and liked perhaps?
oedemis
@oedemis
Hi all :) I need an awesome free open source treegrid lib like https://www.ag-grid.com/react-grid/tree-data/ any ideas ?
Coder-Hossain
@Coder-Hossain
image.png
image.png
image.png
Can anybody please help me where is my mistake? Thanks in Advanced for your kind help.
Mateo
@mph-code
@oedemis why do you need one like it? i am just curious why not use it
Jason Chong
@meljason
Hey guys, I have a question about react. How do I save state in Firebase and prevent deleting when the state goes back to it's initial state?

I have an application where I have a form where the input are stored in a state. So let's say const [firstName, setFirstName] = useState(''). But I want to store the input of the user in Firebase and when user refreshes the website, I want the state to not go back to it's initial state.

What I did at the moment is:

useEffect(() => {

var firstNameRef = firebase.database().ref(...);
firstNameRef.update(
{firstName: firstName;

})
}, [firstName])

However, this will reset the data back to empty if I refresh the page. I just want it to stay to the input the user and not remove anything. My goal to this is that I want persist the state from the database. So if a user want to put their name in the input and they refresh the page, I want the input to still be there. I cannot use the web localStorage because I have lots of users and it would be too much for the localStorage.

sruthi-kurup
@sruthi-kurup
hi @all I wanna create a react ui library from scratch, is create-react-library a good option, please help me to start the coding
oedemis
@oedemis
@mph-code because its not free :)
Jake Dibbert
@JakeyD11
hello everyone
I could really use some help with making a single component that uses information from my mongodb api and shows the item the user clicks on without having to make components for each page
Gaurav Gupta
@gauravgupta98
Guys, I've been working on React and built a Instagram clone. Checkout the demo here - https://instagram-clone-a159b.web.app/
If you have any suggestions or you liked it or want to contribute then checkout the GitHub repo here - https://github.com/gauravgupta98/instagram-clone
Don't be lazy to give a star on the repo ;)
Jason Chong
@meljason

Hey guys I have a list of checked I map through.

So I have a useState:
const [checkState, setCheckState] = useState({});

then my check handler:

const handleCheck = (e) => {
   if (e.target.checked) {
    setCheckState({
        ...checkState,
        [e.target.name]: e.target.checked,
    });
  }
};

Then I have my JSX:

{subImage?.map((item) => {
    return (
      <FormControlLabel
        control={
          <Checkbox checked={               
                       floorPlanChecked['floorplan' + 
                       item.key]
        }
        onChange={handleCheck}
        value={'floorplan' + item.key}
        name={'floorplan' + item.key}
        />
        }
})}

The problem I have is it is not toggling properly, and it does not show up on first toggle. How do I fix it? This is made with Material UI

bchiremath1
@bchiremath1
I have a formGroup as below. and have 2 fields inside it. and there is a button. when I click on the button I want to set 2 fields values programmatically . How can I do that.
both the fields val has props values.
<FormGroup className={className}>
<Field component={FormField} name="latitude" type="number" val={this.props.propertySummary.latitude} label={LabelMgr.getLabel('Latitude')} onChangeFormField={this.onChangeFormField.bind(this)} />
<Field component={FormField} name="longitude" type="number" val={this.props.propertySummary.longitude} label={LabelMgr.getLabel('Longitude')} onChangeFormField={this.onChangeFormField.bind(this)} />
<Button type="button" className="btn btn-primary btn-xs col-6" onClick={e => this.getGeocode(e)}>Where am I?</Button>
</FormGroup>
GuruJustin
@GuruJustin
hi
@nkt there?