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
Sharon Shmorak
@dsysme
Hi I am a newbie to react and frontend web development. I am struggling to understand what happening behind the scenes in react. When components are created, destroyed rendered, how hooks saves states between renders and the like. This series of posts helped a lot:
https://obedparla.com/code/a-visual-guide-to-react-mental-models/
but I still I have clouds in my heads due to the lack of a complete mental model.
Any recommendations for good resource materials on th subject?
Sharon Shmorak
@dsysme
I mostly want to understand now when a component is being mounted/unmounted verses as only being rendered.
elfgod
@elfgod
Hello looking to learn ReactJS want to become a junior FullStackDev any one doing live coding i can jump on it so i can learn and help others thanks
Andrew Dillon
@SirAndrewDillon
I am a junior what do you need to know?
Jason Chong
@meljason
Hello guys.
Alexei Kozhushkov
@joystick
Hi there 👋
Jason Chong
@meljason

Hey guys, I am new to reactjs , but this question is more javascript rather. So have this piece of code:

`
this.client.on("stream-subscribed", me.onRemoteClientAdded);

this.client.on("stream-subscribed", me.displayNotification);

this.client.on("stream-subscribed", me.displayVideoUsername);
`

But I think its is not the best practice to repeat all the on function with the same function 3 times. Is there a better way to approach this?

Alexei Kozhushkov
@joystick
@meljason If this.client is EventEmitter of a kind and me is where your observers are living that code is legit, assuming it works according to specs.
The way to optimise it would be to call on once, update the state (or context) and let react handle the rest.
Jason Chong
@meljason
Thank you! @joystick
Jason Chong
@meljason
Do any of you guys know if it is possible to create a button that enable users to enable their webcam on React instead of them clicking the Camera icon located on the web browser itself?
Jon R. Humphrey
@jonrandahl
@meljason this might help you with the webcam access, but I’m pretty sure you can’t override the browser security request?
https://link.medium.com/UKbg8sGt4bb
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