I'm new in react and I have an abstract question. Imagine that I have a button component without any logic. I have 2 tasks. 1) I have to add the product to the cart on click 2) I have to submit the form on click.
My question is can I somehow add logic without modification
button component?
Taking the component as a basis, make a new one and add the logic that I need?
I tried wrapping the component and doing something but still going back to adding a new prop to my ui component
You have to do this by adding an onClick prop to the button component and then passing it to the <button /> element in the jsx. While creating UI components it is better to pass all props to the wrapped element and override the style properties. Refer to the below example.
const CustomUIButton = (props) => <button className="custom-css" style={customStyle} {...props} />
const customStyle = {};
This way you are letting the user override the existing styles as well.
I hope I have answered your question.
Related
I have a page with dynamic tabs and each of them have a form input. There is a common Submit for each of these forms. As of now, I have a separate component for each of the forms and each of them have multiple user inputs.
<div id="#parentComponent">
{myForm1 && <div><MyForm1 {...props}/></div>}
{myForm2 && <MyForm2 {...props} /></div>}
<div>
<input type="submit">
Now, my question is on Submit (common and in the parent component), I want to be able to access each of the form input values. But as of now, my inactive tab/component gets destroyed and only the active tab/component is there in the DOM.
What is the best way to handle this? Also should there be any preference to controlled/uncontrolled components to handle this use case ?
As of now, I am using the uncontrolled form for these form inputs (using the useformcontext)
I would keep the state in a higher order component, and update it by any change withing the forms.
I would pass down a setFormsData function to every form, and add their data on every change, keeping the old state, like this:
const handleOnChange = value => setFormsData(oldFormData => {...oldFormData, ...value})
You can also use a redux store if you wish.
I'm a little new to React Native and making an app. There are three components I'm currently concerned with:
AllList.js: A screen comprised of a search bar and a FlatList of RowCard.js instances.
RowCard.js: a custom TouchableHighlight component that displays an item from an API, and currently returns an alert when tapped.
drinkPopup.js: A custom Modal component that needs to take an ID from AllList but be controlled by tapping a RowCard.
I have the list of RowCard instances working, but I need to find a way to make the modal from drinkPopup appear when RowCard is tapped. I'm super confused as to how to approach this, since as far as I know props can only be sent from parent to child.
Any suggestions for how to do this? I've looked around to find answers but the results I've found have just been confusing.
So you need a state that will be accessible by both the drinkPopup and RowCard. The way to go is to keep it in their parent (AllList) and pass it accordingly.
So you Parent should be something like:
const AllList = () => {
const [visibleModalId, setVisibleModalId] = useState(null)
return <>
<RowCard setVisibleModalId={setVisibleModalId}>
<drinkPopup visibleModalId={visibleModalId}>
</>
}
That way you can control the modal from RowCard (by calling setVisibleModalId there) and you also know if the drinkPopup should be visible (because it knows if the visibleModalId is null or not)
I'm sorry for this question but I'm new to react and trying to find best practice on how to update another class component from another class component.
For example I have AddItem.js and ViewItem.js but has the same route. I'm updating ViewItem.js ListGroup by re-rending(componentDidMount()). How can I do this with AddItem.js button onClick?
You can take a new state property in the parent and pass that as props to AddItem and ViewItem and use that prop as a state for these two components and in your button click event you can change the state and react renders the component automatically on state change.
See this simple example
If ViewItem and AddItem are siblings, then you can call methods of each other using ref of another component use ref doc
OR
you can also wrap both with parent component and use parent state for both the child.
If Viewitem and Additem are child-parent or vice versa then you can use pass props and change state based on the change in props.
It can be achieved by creating a parent class (for example Home.js) on top of AddItem.js and ViewItem.js and pass data as props on click to the child component.
In case you if you are using React and Redux it becomes relatively simple on click of a button you can call method in your action.js which will dispatch an action with payload data to the reducer, which can we used by adding mapStatetoProps() in ViewItem.js and AddItem.js, so once you receive the data in your props variables it will reload/refresh that particular component.
I have a little question about some techniques that are used to render/not render modals.
At the moment there are 2 main ways to do so.
For the first example, we use a visible prop onto the modal and based on that, we will apply a style that will hide the modal. This will be handled by state and then toggled with a button for example :
<Modal
title="Foo"
visible={this.state.visible}
>
Foo
</Modal>
The second way of doing also use state, but uses a condition to render the modal or not :
{this.state.visible && (
<Modal title="Foo">
Foo
</Modal>
)}
The handy thing with this is that the modal will not be rendered until it should.
So what is the best way of doing? I suppose the 2 are right but is there one that is better than the other?
Personally second one is better, because by checking the state at Parent Component, you separate Parent Component logic and Child Component logic, since Modal component only responsible for showing the modal, but the logic whether open or close modal belongs to Parent Component logic. But both solutions will work :)
Just research the question in UI libs docs: antd, material-ui, semantic-ui.
And you will find the answer => prop (with names open, show, visible etc.) is the best way to control visibility (inner state of component).
For example you can see antd modal that use this package
(react-component/dialog):
https://github.com/react-component/dialog/blob/master/src/Dialog.tsx
You can return null or use css (display: none; for sample) for invisible modal
I have two different components in my React application.One component to display pop up, and other for text search field.
There is no relation(parent-child)between them.
My question is when user clicks pop up message(component), be focused text field in another component.
How can I handle this situation without using document.getElementById?
only using a react a specific way like reactDOM with ref.
Is it possible to handle like that?
Thanks
Find the common parent component, and write a function which updates a state with ref of the element to be focused. Pass down that function as props to the second component.
And use <input ref={r => this.props.func(r)
Now on click of first component you can access this parent state.