Could you help me in telling me how to find a component with this structure in react? I will implement something similar in my project.
#alberto It is always good to share as many info about your question as possible but not too long stories. In your case, You can tell in words what is required and also if you want to inset some image, insert inline so it is visible to viewers .
However, here is what you want. This is called Transfer component from Ant Design.
https://ant.design/components/transfer/
Here is sample code, how api looks like
<Transfer
dataSource={mockData}
titles={['Source', 'Target']}
targetKeys={targetKeys}
selectedKeys={selectedKeys}
onChange={this.handleChange}
onSelectChange={this.handleSelectChange}
onScroll={this.handleScroll}
render={item => item.title}
disabled={disabled}
/>
Related
I'm learning how to use MUI's Autocomplete component, and I'm struggling to understand the renderInput prop. I get that it exists to specify how you're going to display the component, but I don't understand how it works. In particular, what is the params object that is passed into the function? What does it contain? How am I supposed to use it?
I've been doing a lot of web searches and have failed to find a good resource to explain this. The documentation's description of the prop is "Render the input", which drives me a little crazy.
Any help elucidating would be very much appreciated. Thank you!
The params contain the props needed for the input element and the container around the input. It allows you to make your own custom input using the functionality provided by MUI.
This is from the MUI docs Autocomplete custom input section.
renderInput={(params) => (
<div ref={params.InputProps.ref}>
<input type="text" {...params.inputProps} />
</div>
)}
You can always check for the params by a simple console.log
Maybe it's the way I am wording things, but I am not getting the answer I want on the following topic. So currently, my code looks like this (minus all the details):
<ClickAwayListener onClickAway={handleClickAway}>
<Autocomplete options={someList} />
</ClickAwayListener>
So I have two questions.
Is Autocomplete component here considered to be an extension of ClickAwayListener? Is ClickAwayListener considered a parent component?
I want the handleClickAway function to change the options state within Autocomplete. How would I go about doing this?
I am pretty new to React, so I would appreciate any and all help. Thank you in advance.
It looks like most likely you are using your click away component not in a way it was intended to be used. It looks like it should be used with this technique.
<ClickAwayListener onClickAway={handleClickAway}>
{(isClickedAway) => (
{/*or whatever api your Autocomplete has*/}
<Autocomplete options={someList} isOpen={!isClickedAway} />
)}
</ClickAwayListener>
As to your questions:
ClickAwayListener is a parent of Autocomplete. There's no such thing as extension in react tree.
in your handleClickAway you have to change someList. If it comes through the state, then with setState, if it comes from props - with a corresponding callback.
My team and I have been using Antd a react component library. I was asked to connect google.map's Places library to an input field so we can get an easy address drop-down list.
The problem is the Antd's input component is wrapped up under the hood. So when I click on an address from google.maps Places menu it appears in the input field for a milli sec then disappears.
I tried all the event.preventDefault(), event.stopPropoagtion(). Is there any trick to combining google.maps places returned data with a well nested react-ui component?
(too long for comment)
I have the exact same problem.
I'm using NextJS with functional component and #react-google-maps/api library.
The workaround I use: simple <input> element combined with the right CSS class to make it look like the Antd <Input>.
Like this:
<LoadScript
googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAP_API_KEY}
libraries={libraries}
>
<Autocomplete
onLoad={(autocomplete) => setAutocomplete(autocomplete)}
onPlaceChanged={onPlaceChanged}
restrictions={{ country: "fr" }}
fields={['geometry.location', 'formatted_address']}
>
<input
type="text"
placeholder="Enter your address"
className="ant-input"
/>
</Autocomplete>
</LoadScript>
This way, when clicking on an address from Places menu, its value stays in the input field.
If anyone has a better and less hacky solution, I'm looking for one!
This is a very simple matter of state management. It sounds like the google-places input field was working correctly or it wouldn't have shown up at all. If your input field is connected to let's say Reactjs then you will need to add the google-places response data to your state-management and it should stop disappearing. This happens a lot when companies use custom state-management systems.
I'm new to React Native and I've been playing around with inputs. How can I achieve the look of the first picture from their documentation?
https://react-native-training.github.io/react-native-elements/docs/input.html
I'm looking at their documentation, and I see there is a field called inputContainerStyle. However, I don't see any values that I could potentially use.
This is what I have:
<Input placeholder="Email Address" textAlign="center" autoCapitalize = "none" leftIcon={<Icon name='user' size={24} color='black'/>}/>
This probably isn't possible with only a Input component.
You might solve this by adding 2 View components. One on each side of the TextInput.
These Views should be styled as a triangle. Take a look at this css explanation for more info https://css-tricks.com/snippets/css/css-triangle/
This is one way to achieve your goal, I don't know if it's the 'best' way.
I am working on an basic React CRUD App and I came across a strange issue.
Using Reactstrap Input Component or the bootstrap class="form-control" the input values are undefined onSubmit.
If I leave the elements as a standard html input the values submit just fine?
I cannot figure out why this is happening.
I put together this demo that illustrates the issue.
Code Sandbox Snippet <- Live Demo
On the AddName.js file I have one Input and one input on submit you can see that the first name submits but the description does not.
<FormGroup>
<input
placeholder="First Name"
ref={nameInput => (this.nameInput = nameInput)}
/>
</FormGroup>
<FormGroup>
<Input
placeholder="Description"
ref={descriptionInput => (this.descriptionInput = descriptionInput)}
/>
</FormGroup>
Can anyone explain why this is happening? Is it possible how I have the refs on the inputs?
Before utilizing 3rd party packages, you should read into using Controlled Components strictly through React. Then, once you understand the flow, incorporate the packages.
I've rewritten your project to include all of the above, as well as written notes describing what I changed and why. There are also a few tricks and shortcuts I've used to simplify the code, such as: setState callback, ES6 Object Deconstruction and Fat Arrow Functions.
Working example: https://codesandbox.io/s/l9m0vor4wq
You should only need to use refs for obtaining a DOM element or a class instance for UI manipulation, instead of obtaining a data value. For example, utilizing a ref to draw attention to a DOM element via using its focus() method or removing attention from it via its blur() method. In your case, we would only use the synthetic event instead of a ref.
On a side note, be careful about using the name as a key in <PersonCard/>, because multiple users can share the same name value. This will cause React to complain that two keys are the same, and cause issues if you ever try to remove, resort, or filter the names list. To keep it simple, I instead used the key provided by the map function. While this approach works, it's not the best solution. Ideally, each person should have an id property with a UUID. This ensures all of your keys will be unique.