I am new to react & I am using material-ui and I want to design a custom autocomplete in React where once data is selected from dropdown it appears as a chip in the text input. I am using the onNewRequest property of material-ui autocomplete but I am not sure how to render a chip component inside it.
Can someone guide me how to do it properly? I want to design recipients like layout found in gmail. I know there are npm packages available but I need to design it purely from material-ui so please guide with a proper approach
Thanks
The question is very broad but I'll try to at least point you in the right direction.
You don't need to render the chips inside the autocomplete, create a a new reusable component. The parent component will contain both the autocomplete and the chips. This will contain all the state. It has two child components:
The first child is always going to be the autocomplete, modify the material-ui styles to make it transparent and without an underline/borders. Whenever an element is selected, send an event to the parent to add the element to the chips array in the parent state.
The second child is the array of chips. This is only a presentational component, receives an array of chips, and the chips might contain another prop event to remove the chip.
Related
I have a file, app.js, which contains some React code. The code producess something like a rudimentary kanban board. Right now, the user can create a new div for the board, and then edit or drag the div into a column. However, the state is not preserved if the div has been edited before dragging across columns; the div contents will disappear.
I have tried editing the code in the returned div, modifying the isContentEditable property, but to no avail; the state is lost, and the entered content dissapears, leaving an empty div.
For reference, here is the code in a sandbox:
https://codesandbox.io/s/sweet-feather-80261
All help is appreciated, total noob to front end development!
Try using the useState hook for functional components, or look into Redux to implement global state!
Redux will allow you to have state that can be changed and used by multiple components.
I am trying to integrate a wrapping component based on select2, taking as an example the same one that proves the official documentation of vue.js https://v2.vuejs.org/v2/examples/select2.html the problem is that I need to use this component as a multiple select and pick up the values of those selected in an array. this is the link to reproduce the official example https://jsfiddle.net/d131Lebj/4989/, what changes should I make to obtain this?
I'm hacking with React/Redux and have been building lots of container and components.
However I recently encountered a design choice I made that made on of my Elements look like this:
My question is is this design OK? Basically I am struggling how to pass the Redux Actions down to the Button, since the button is a few levels deep. I could keep passing the actions down component to component from the HeaderContainer, but if the DOM got deeper it would just get worse and worse.
I feel like this design is WRONG since a presentational component is calling a container component.
Any thoughts?
You have three options:
First is to directly connect the button component to the store and let it be both container & presentational component. Simple and effective.
export default connect(mapStateToProps, mapDispatchToProps)(ButtonComponent)
See an example from the creator of Redux here (the 4th post)
Second is to create a container to wrap the button and let the button be only presentational - your current implementation. Very good layered architecture, but overengineered at this point for me.
Third is to pass the action down from the HeaderComponentContainer to the ButtonComponent.
I would go for the third one if the button is no more than 2 levels deep, since you already connected your HeaderComponentContainer and as a parent it is its responsibility to determine what functionality its children should provide (they only present, right?).
PS. You can use React's context to pass actions / properties arbitraly deep in the hierarchy without explicitely doing it for each component.
I am looking to do a research/develop to make a UI editor (like WYSIWYG). There should be a control panel for components (like buttons,labels..etc) and be dragging them into a panel area it should generate the UI and corresponding code.
If anyone can give me a hint it is very helpful.
Thank you All
First of all you have to create a repository of components. After that make a factory that will return the specific component. Then create an UI for components lists, so that user can pick a component from that list and drag it to his page/screen. You must also make a property window for the component so the user can give the height/width, styling and other feature to that component. property window may be specific to the component.
Say I have 2 components. Component A renders an input that scales dynamically to its text. Component B renders an input with autocomplete capabilities. Is there a standard way to combine the 2 so that I can have a component that renders an input with autocomplete capabilities and that scales dynamically? One pattern is to wrap one component with the other, so that A renders B. But in the case that the components are a black box, like imported from a node module, this wouldn't be possible right?
You should look into Mixins. Create a single Input component, and create an "Autocomplete" and "scale" mixins. More on the subject here.