Currently, I am developing an interactive drag-and-drop application using React and Redux. My goal is to insert a new div element into a container when the ondragstart event handler is triggered by a component.
The component responsible for the dragging operation is structured as follows:
import React, {Component} from 'react'
import {classify} from '../functions/functions'
export default class Actions extends Component {
constructor(props){
super(props)
this.state={opacity : 1};
this.dragstart = this.dragstart.bind(this)
this.dragend = this.dragend.bind(this)
}
dragstart(e){
this.setState({opacity : .4});
let id = e.target.id;
}
dragend(){
this.setState({opacity : 1});
}
render(){
let name = classify(this.props.name);
return <div className={this.props.class} draggable='true' onDragStart={this.dragstart} onDragEnd={this.dragend} style={this.state}>
<img className="default actions-icon" src={'./icons/'+name+'/'+name+'-.svg'}/>
<span className="default">{name}</span>
</div>
}
}
The component where I intend to append an element:
import React, {Component} from 'react'
import Action from './actions'
class Activity extends component{
render(){
const initialState = {
drag: 'Off'
}
let Actions = this.props.tasks.map((task)=> <Action key={task.name} name={task.name} class='default1 activity'/>)
return <div id={this.props.id} className='default1 phase' >
{Actions}
</div>
}
}
export default Activity
This new element will be a child of the following component:
import React, {Component} from 'react'
import Action from './actions'
//import Activity from './activity'
import {actions} from '../variables/variables'
export default class Actionsbar extends Component {
render(){
return <div id='process-display' className='default'>
<div id='pase-0' className='default1 phase'>
<Action key='debut' name='debut' class='default1 activity'/>
</div>
<div id='pase-1' className='default1 phase'>
</div>
</div>
}
}
As a newcomer to React and Redux, I'm struggling with maintaining state in the store and connecting it with components. Any help would be greatly appreciated.
Thank you in advance.