How to implement add method with user selection? - reactjs

Question

I have an add method in my application. When a widget is clicked you are given the ability to add another widget. Currently the default component being added is but I want the user to be able to select from a list of components. I am new to react any help would be great.
addEvent=(index)=>{
this.setState({isModalOpen: true})
const copyWidgets=Object.assign([],this.state.widgets);
let widget=this.state.widgets[index];
widget.content=<DataTable/>; //I would like to allow the user to choose from a list of components instead of just adding <DataTable/>
copyWidgets[index]=widget;
this.setState({
widgets:copyWidgets
})
}
This is my app.js which contains the widgets and add event:
import React, { Component } from 'react';
import Swappable from './components/SwappableComponent'
import './App.css';
import DataTable from './components/tableWidget';
import CheckboxList from './components/CheckboxList';
import AddWidgetDialog from './components/AddWidgetDialog';
import PropTypes from "prop-types";
import { withStyles } from "#material-ui/core/styles";
import Paper from "#material-ui/core/Paper";
import Grid from "#material-ui/core/Grid";
import { Table } from '#material-ui/core';
const styles = theme => ({
root: {
flexGrow: 1
},
paper: {
padding: theme.spacing.unit * 2,
textAlign: "center",
color: theme.palette.text.secondary
}
});
class App extends Component {
constructor(props) {
super(props);
this.state={
widgetOptions:[{name:"Data Table", comp:<DataTable/>},{name:"List", comp:<CheckboxList/>}],
widgets:[ //array for layout
{id:1, content: <DataTable/>},
{id:2, content: <CheckboxList/>},
{id:3, content: ""},
{id:4, content: ""}
],
isModalOpen: false
}
}
deleteEvent=(index)=>{
const copyWidgets=Object.assign([],this.state.widgets);
let widget=this.state.widgets[index];
widget.content="";
copyWidgets[index]=widget;
this.setState({
widgets:copyWidgets
})
}
addEvent=(index)=>{
this.setState({isModalOpen: true})
const copyWidgets=Object.assign([],this.state.widgets);
let widget=this.state.widgets[index];
widget.content=<DataTable/>;
copyWidgets[index]=widget;
this.setState({
widgets:copyWidgets
})
}
onRequestClose = () => {
this.setState({
isModalOpen: false,
});
}
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<AddWidgetDialog widgets={this.state.widgetOptions} isModalOpen={this.state.isModalOpen} onRequestClose={this.onRequestClose} />
<Grid container spacing={24}>
{
this.state.widgets.map((widget,index)=>{
return(
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}><Swappable id={widget.id} content={widget.content} delete={this.deleteEvent.bind(this,index)} add={this.addEvent.bind(this,index)}/></Paper>
</Grid>
)
})
}
</Grid>
</div>
);
}
}
App.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(App);
This is my modal:
import React, { PropTypes } from 'react';
import Modal from 'react-modal';
const AddWidgetDialog = ({ widgets, isModalOpen, onRequestClose}) => {
const widgetItems = Object.keys(widgets).map((widget, key) => {
return (
<div key={key} className="list-group">
<a href="#" className="list-group-item">
<h6 className="list-group-item-heading">{widgets[widget].name}</h6>
</a>
</div>
);
});
return (
<Modal
className="Modal__Bootstrap modal-dialog"
isOpen={isModalOpen}>
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" onClick={onRequestClose}>
<span aria-hidden="true">×</span>
<span className="sr-only">Close</span>
</button>
<h4 className="modal-title">Add a widget</h4>
</div>
<div className="modal-body">
<h5>Pick a widget to add</h5>
{widgetItems}
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default" onClick={onRequestClose}>Close</button>
</div>
</div>
</Modal>
);
};
export default AddWidgetDialog;

Answer 1

I am not sure did I understand well, but in general I would do something like this:
function compGallery(picked) {
switch(picked) {
case "ListWidget": return <ListWidget />
case "Table": return <Table />
...
default: return <DataTable />
}
}
Then I would create a list component where the user can pick , which handler would call this.setState({ pickedComponent })
and use it inside your method:
addEvent=(index)=>{
this.setState({isModalOpen: true})
const copyWidgets=Object.assign([],this.state.widgets);
let widget=this.state.widgets[index];
widget.content=compGalery(this.state.pickedComponent);
copyWidgets[index]=widget;
this.setState({
widgets:copyWidgets
})
}
I hope it helps.
After update of the question here are my suggestions:
we pass the handler as a prop handleWidgetSelection
const AddWidgetDialog = ({ handleWidgetSelection, widgets, isModalOpen, onRequestClose}) => {
const widgetItems = Object.keys(widgets).map((widget, key) => {
return (
<div key={key} className="list-group">
<a href="#" onClick={() => handleWidgetSelection(widget.name)} className="list-group-item">
<h6 className="list-group-item-heading">{widgets[widget].name}</h6>
</a>
</div>
);
});
return (
<Modal
className="Modal__Bootstrap modal-dialog"
isOpen={isModalOpen}>
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" onClick={onRequestClose}>
<span aria-hidden="true">×</span>
<span className="sr-only">Close</span>
</button>
<h4 className="modal-title">Add a widget</h4>
</div>
<div className="modal-body">
<h5>Pick a widget to add</h5>
{widgetItems}
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default" onClick={onRequestClose}>Close</button>
</div>
</div>
</Modal>
);
};
Here we can define the handler which updates selectedWidgetId which is basically the item you selected in the modal, once we have that we just pass find which component want to show
import React, { Component } from 'react';
import Swappable from './components/SwappableComponent'
import './App.css';
import DataTable from './components/tableWidget';
import CheckboxList from './components/CheckboxList';
import AddWidgetDialog from './components/AddWidgetDialog';
import PropTypes from "prop-types";
import { withStyles } from "#material-ui/core/styles";
import Paper from "#material-ui/core/Paper";
import Grid from "#material-ui/core/Grid";
import { Table } from '#material-ui/core';
const styles = theme => ({
root: {
flexGrow: 1
},
paper: {
padding: theme.spacing.unit * 2,
textAlign: "center",
color: theme.palette.text.secondary
}
});
class App extends Component {
constructor(props) {
super(props);
this.state={
selectedWidgetId: "Data Table",
widgetOptions:[{name:"Data Table", comp:<DataTable/>},{name:"List", comp:<CheckboxList/>}],
widgets:[ //array for layout
{id:1, content: <DataTable/>},
{id:2, content: <CheckboxList/>},
{id:3, content: ""},
{id:4, content: ""}
],
isModalOpen: false
}
}
handleWidgetSelection=(id) => {
this.setState({selectedWidgetId: id})
}
deleteEvent=(index)=>{
const copyWidgets=Object.assign([],this.state.widgets);
let widget=this.state.widgets[index];
widget.content="";
copyWidgets[index]=widget;
this.setState({
widgets:copyWidgets
})
}
addEvent=(index)=>{
this.setState({isModalOpen: true})
const copyWidgets=Object.assign([],this.state.widgets);
let widget=this.state.widgets[index];
widget.content=this.state.widgetOptions.find(w => w.name === this.state.selectedWidgetId).comp;
copyWidgets[index]=widget;
this.setState({
widgets:copyWidgets
})
}
onRequestClose = () => {
this.setState({
isModalOpen: false,
});
}
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<AddWidgetDialog handleWidgetSelection={this.handleWidgetSelection} widgets={this.state.widgetOptions} isModalOpen={this.state.isModalOpen} onRequestClose={this.onRequestClose} />
<Grid container spacing={24}>
{
this.state.widgets.map((widget,index)=>{
return(
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}><Swappable id={widget.id} content={widget.content} delete={this.deleteEvent.bind(this,index)} add={this.addEvent.bind(this,index)}/></Paper>
</Grid>
)
})
}
</Grid>
</div>
);
}
}
App.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(App);