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
Andrew Dillon
@SirAndrewDillon
You cannot override the browser.
Lior Kedmi
@lkedmi

Hey guys, would love to get your help and thoughts about an issue I'm having.
I'm building a form with multiple fields, every field has it's own state using the useState hook. when the component unmounts, I'd like to store the current state into the local storage so when it mounts up again, I can reload it using useEffect.
It works BUT only for the first setFIELD, the rest are being ignored completely and I'm not sure why.

Here's a snippet of the code

React.useEffect(() => {
    const storedConfig = Office.context.document.settings.get("GenerateRentTable");

    if (storedConfig) {
      const config = JSON.parse(storedConfig);

      setRentType(config.rentType);
      setInputMethod(config.inputMethod);
      setIsConsolidated(config.isConsolidated)
      setIsExcludeBaseRent(config.isExcludeBaseRent);
      setIsAddRowForFreeRent(config.isAddRowForFreeRent);
      setIsEndUnknown(config.isEndUnknown);
      setSpecificTerm(config.specificTerm);
      setPremisesModType(config.premisesModType);

      Office.context.document.settings.remove("GenerateRentTable");
    }

    return () => {
      Office.context.document.settings.set("GenerateRentTable", JSON.stringify(configRef.current));
    }
  }, []);

Would appreciate your help!

angeljruiz
@angeljruiz

Hello hello! I have a quick question about refs. I'm trying to center an item relative to the entire page, but I have an item of dynamic width to its left. I'm trying to use a ref to that item on the left to grab its width to use as an offset, but I'm having issues.

export default function Home() {
  const classes = useStyles();
  const imgRef = useRef();

  useEffect(() => {
    console.log(imgRef.current.offsetWidth); // working
    window.imgRef = imgRef;
  }, [imgRef.current.offsetWidth]);

  return (
      <Grid container align="center">
        <RootRef rootRef={imgRef}>
          <Grid item xs={2}>
            <img style={{ width: '100%', height: '100%' }} src={brand} alt="brand" />
          </Grid>
        </RootRef>
        <Grid item style={{ marginLeft: `-${imgRef.current.offsetWidth / 2}px` }} xs={10}>
          <Typography variant="h2" style={{ fontWeight: '500' }}>Our Team</Typography>
        </Grid>
   </Grid>

I'm getting the feeling there's an easier way

Jason Chong
@meljason

Hello, guys I have an issue in updating a state in my component.

So in my main component I have :

const [openPopup, setOpenPopup] = useState(true);

then in another component I used a button to set the state to false like so :

<button onClick={() => setOpenPopup(false)}> X </button>

But nothing is happening. Anyone knows what could be the problem with my code?

Richie Madden
@richieboo

Does this apply?
https://stackoverflow.com/questions/55028583/how-do-i-call-setstate-from-another-component-in-reactjs

“You can't directly call setState on a parent component from a child component because the updating of a component state is restricted to the current component.

To handle this, simply pass a function from the parent to the child that contains setState. So when you want to update the parent's state, just call that passed function.”

2 replies
Jon R. Humphrey
@jonrandahl
setOpenModal(!openModal) passes the opposite of whatever openModal is currently at; setOpenModal(false) says openModal is always false, nothing else.
Jason Chong
@meljason
Thank you!
Jason Chong
@meljason
Hi guys, I created a modal with material UI's Dialog component, however, I cannot seem to get an element from the modal by id even though the modal is inside the body. Anyone had any experience with that?
C5H8NNaO4
@C5H8NNaO4
Hey, is there any way to get Material UI running on a Vercel deployment using Next.js?
Muhammad Salman
@Sal-man
Hi all, has anyone experience with reactfire its react hooks library for firebase, im stuck at a point and needed help :)
Shimmy
@hidesminimally

Hi I'm just dabbling into react and I have a simple question:

What is the difference between these two lines?

const [notifications, setNotifications] = useState([]);
...
setNotifications([...notifications, notification]);
setNotifications((notifications) => [...notifications, notification]);

The core of my confusion is that I assume they're both pushing notification into notifications and then updating the notifcation state to be that new concatenated array. However, the two lines result in different things.

More generally, when should I use the callback form in set$State?

Shany Golan
@shanytc
hey guys, how to pass a callable component with typescript ?
say i want to pass in a component to another function and call it
matanorlan
@matanorlan
hey guys i trying to work with async function to fetch data from api im using papaparse to convert the CSV file to json

import papa from 'papaparse'
import { features } from '../data/countris.json'

const url = 'https://raw.githubusercontent.com/owid/covid-19-data/master/public/data/vaccinations/vaccinations.csv'

export const load = async () => {
papa.parse(url, {
download: true,
header: true,
complete: async function (results) {
return (await processVaccineData(results.data))
},
})
}

const processVaccineData = async (covidCountries) => {
const newarr = []
covidCountries.sort((a, b) => parseInt(b.total_vaccinations) - parseInt(a.total_vaccinations))
for await (let num of features) {
const mapCountry = num
const vaccineCountry = covidCountries.find((vaccineCountry) => vaccineCountry.location === mapCountry.properties.admin)

    mapCountry.properties.total_vaccinations = 0
    mapCountry.properties.total_vaccinations_text = "0"

    if (vaccineCountry !== undefined) {
        const vaccine = Number(vaccineCountry.total_vaccinations)
        mapCountry.properties.total_vaccinations = vaccine
        mapCountry.properties.total_vaccinations_text = vaccine
        newarr.push(mapCountry)
    }
}

return newarr

}

console.log(load())

if i try to print the 'newarr' to the console i get the currect result, if i tring to use the whole load() function i get undifine
matanorlan
@matanorlan
Which country has the most vaccines?
See my new project, and help me develop it
https://adoring-jackson-5eecfc.netlify.app/
FullStack Developer
@fullstackdev96

Hello everyone! Hope you are doing well!
I have one basic question for React router.

Requirement

  • When the modal shows, the url should be changed without redirecting. (e.x. - https://url/{id}/modalshow)
  • When the modal hides, the url should be changed without redirecting. So the modalshow router should be removed. (e.x. - https://url/{id}/)

How can I do like this? Hope you will help me for that. Thank you!

Jason Chong
@meljason
Hey guys, I have a question. Do you guys think that its possible for me to get the state in a pure javascript script? I have an api integration and I wanna get the state from that script. Is that even possible?
1 reply
Jagdish Parihar
@jatin510
Hi. I am implementing downloading a webpage and getting the data in text format. And using react to render that webpage using dangerouslySetInnerHtml
Can I do something that will allow me to render only the updated changes. And not the whole html which is provided inside the dangerouslySetInnerHtml
Sagato
@Sagato
Hi People I have a simple question
I want to pass a function reference and directly call a function at the same time onBlur event.
onBlur={() => {
                onBlur;
                setShow(false);
                setFocused(false);
              }}
I get a Expected an assignment or function call and instead saw an expression.eslintno-unused-expressions Linter error. Is there a convenient way of doing this without having to surpress the warning?
jcapil-ictdu
@jcapil-ictdu
Hello devs. I would like to ask if there's a package for echarts in react
5 replies
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 ?