react-functional-component

Moving external library from Class-based to Functional Component in React

夙愿已清 提交于 2021-02-10 14:46:34
问题 I'm using the JExcel javascript library with React. The documentation outlines the approach with Components, but makes use of ReactDOM.findDOMNode() which I believe has been deprecated. I've tried moving it to a functional component, but whilst it does ostensibly work, there is an issue, in that the React component using the class re-renders about 5 times... and each re-render causes the JExcel element to add another sheet! Here's the original example code: import React from "react"; import

Redirecting to other page using React functional component

て烟熏妆下的殇ゞ 提交于 2021-02-07 21:11:01
问题 I have a page where I have button, if users click on that button I am going to redirect to other page say (page 2) using the below function: const viewChange = (record) => { let path = `newPath`; history.push('/ViewChangeRequest'); }; I want to pass some of the values to other page say record.id, record.name but could not be able to figure it out the way we can pass these to other page.. My other page is looks like below: const ViewChangeRequest = () => { ..... ...... ...... }; export default

Redirecting to other page using React functional component

假如想象 提交于 2021-02-07 21:10:50
问题 I have a page where I have button, if users click on that button I am going to redirect to other page say (page 2) using the below function: const viewChange = (record) => { let path = `newPath`; history.push('/ViewChangeRequest'); }; I want to pass some of the values to other page say record.id, record.name but could not be able to figure it out the way we can pass these to other page.. My other page is looks like below: const ViewChangeRequest = () => { ..... ...... ...... }; export default

react promise in functional component

岁酱吖の 提交于 2021-01-29 05:55:53
问题 I have a functional component in which I want to save the data in my inputs form sending them with saveForm method to my java API. How can I read the response of this promise props.saveForm (in order to look for potentials server errors) in a functional component ? I've read that in these cases it must be used useEffect hooks..but If I move my handleSubmitForm() inside useEffect than I can't call it when the onSubmit event is thrown. Please enlight me. Thank you for your wisdom. Code I found

react promise in functional component

戏子无情 提交于 2021-01-29 05:49:10
问题 I have a functional component in which I want to save the data in my inputs form sending them with saveForm method to my java API. How can I read the response of this promise props.saveForm (in order to look for potentials server errors) in a functional component ? I've read that in these cases it must be used useEffect hooks..but If I move my handleSubmitForm() inside useEffect than I can't call it when the onSubmit event is thrown. Please enlight me. Thank you for your wisdom. Code I found

Updating Functional Component Local State Using Data From Redux State

强颜欢笑 提交于 2021-01-28 08:01:29
问题 I'm building contact manager. When the user clicks the update button for a specific contact an action is dispatched and the "hotContact" property in the reducer's state is populated with an object. What I want is the fields of the ContactForm to be populated with the name and number of the "hotContact". However, despite the hotContact being loaded into the redux state my ContactForm component won't display the name and number of the hotContact. How can I proceed? This is what I have so far. I

Fetching data in React's useEffect() returns “undefined”

 ̄綄美尐妖づ 提交于 2021-01-27 18:38:58
问题 I'm trying to fetch data from a database. It's a get request. All works fine as long I am using the fetched data in the async function. But ouside of it, it just returns "undefined". What am I doing wrong? Thanks for your help :) const [accountInfos, setAccountInfos] = useState(); const [error, setError] = useState(); const [loading, setLoading] = useState(true); useEffect(() => { (async function runEffect() { const fetchedAccountInfos = await fetchAccountInfos(); if (fetchedAccountInfos &&

What type of components should I use in React: functional components or class base components?

非 Y 不嫁゛ 提交于 2020-12-30 02:37:25
问题 What confused me is that both functional component and class based component can now use State and Props but in different implementations. I prefer class based component since I am angular developer and I find it more comfortable to work with these type of components. But I searched for this and many experts said it is better to use functional components as mush as possible. I want to know if it really matters with tech companies when someone apply for react developer position. Would they

Getting the stars to line up CSS

微笑、不失礼 提交于 2020-06-29 08:38:05
问题 I have a component that I use for a star rating, I decided to use FA icons to do the job by using half stars. Every works great, besides the CSS. I've successfully flipped some of the stars (FA icons only go to one side) so the stars align correctly, they just don't touch. I just need some advice on the easiest way to handle it. Rater.js import React, { useState } from 'react' import {FaStarHalf} from "react-icons/all"; import './Rater.css' const Rater = () => { const [rating, setRating] =