Trying to access Bootstraps select form value using React props. This is what i've tried so far but it doesn't store the options value.
Example Code:
class BottomBar extends React.Component {
constructor(props) {
super(props);
this.state = {
hidden: true,
items: [],
text: '',
priority: ''
};
this.handleClick = this.handleClick.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handlePriority = this.handlePriority.bind(this);
};
handleChange(e) {
this.setState({text: e.target.value});
}
handlePriority(t) {
this.setState({priority: t.target.value});
}
handleSubmit(e) {
e.preventDefault();
if(!this.state.text.length) {
return;
}
const newItem = {
text: this.state.text,
id: Date.now(),
priority: this.state.priority
};
this.setState(state => ({items: state.items.concat(newItem), text: '', priority: ''}));
console.log(newItem);
}
handleClick(t) {
i++;
if(i === 1) {
this.setState({hidden: false});
} else if(i === 2) {
this.setState({hidden: true});
i = 0;
}
}
render() {
const { classes } = this.props;
return(
<React.Fragment>
<AddCard items={this.state.items} id={this.state.id} priority={this.state.priority} item={this.state.item}/>
<CssBaseline />
<AppBar position="fixed" color="primary" className={classes.appBar}>
{!this.state.hidden ? <TodoList text={this.state.text} handlePriorty={this.handlePriorty} priority={this.state.priority} handleSubmit={this.handleSubmit} items={this.state.items} handleChange={this.handleChange}/> : null}
<Toolbar className={classes.toolbar}>
<IconButton color="inherit" aria-label="Open drawer">
<MenuIcon />
</IconButton>
<a href="#" onClick={this.handleClick}>
<Button variant="fab" color="secondary" aria-label="Add" className={classes.fabButton}>
<AddIcon />
</Button>
</a>
<div>
<IconButton color="inherit">
<SearchIcon />
</IconButton>
<IconButton color="inherit">
<MoreIcon />
</IconButton>
</div>
</Toolbar>
</AppBar>
</React.Fragment>
);
}
}
class TodoList extends React.Component {
render() {
return(
<div className="container">
<form onSubmit={this.props.handleSubmit}>
<div className={"form-group"}>
<label htmlFor={"title"}>Enter A Task Title</label>
<input value={this.props.text} onChange={this.props.handleChange} type="text" className={"form-control"} id="title" rows="3"></input>
</div>
<div className={"form-group"}>
<label htmlFor={"exampleFormControlSelect1"}>Example select</label>
<select onChange={this.props.handlePriority} className={"form-control"} id="exampleFormControlSelect1">
<option value={this.props.priority} onChange={this.props.handlePriority}>Low Priority</option>
<option value={this.props.priorty} >Medium Priority</option>
<option value={this.props.priorty} >High Priority</option>
<option value={this.props.priorty} >Important</option>
<option value={this.props.priorty} >Very Important</option>
</select>
</div>
<button className={"btn btn-primary btn-custom"}>Add : {this.props.items.length + 1}</button>
</form>
</div>
);
}
}
My code contains two classes one of them is setting the stored values in states and my second class is accepting these states through props. My text input works fine, but my select / options selector doesn't seem to save the value selected.
Output:
Thank you for any constructive feedback.
I highly recommend you to split your code into smaller functions.
In particular, I would recommend a class component as a wrapper and function components for your select & option nodes.
First, lets create a function component for the option node
const Option = ({ value, description }) => (
<option value={value}>{description}</option>
);
As you can see, it takes 2 arguments: value & description. Feel free to add your own.
Then, lets create a function component for our select node
const SelectBox = ({ children, onChange, value }) => (
<select onChange={onChange} value={value}>
{children}
</select>
);
And as last step, we put it all together:
class App extends React.Component {
state = {
value: 2
};
handleChange = e => {
this.setState({ value: e.target.value });
};
render() {
return (
<div className="App">
<SelectBox onChange={this.handleChange} value={this.state.value}>
<Option value="1" description="First Item" />
<Option value="2" description="Second Item" />
<Option value="3" description="Third Item" />
</SelectBox>
</div>
);
}
}
Link to codebox
Related
I have a tab component with 2 tabs. The first tab contains a list of employees and a button that transfers you in the second tab (contact form) containing the data of the selected employee. In the first tab I create an object of an employee, send it in the second tab and in the second tab i set the state.name, state.surname with the object values.
The problem is that in order to load the data in the form I need to change back in the first tab and go to the second tab again.
The tabs component
import React from 'react';
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
{...other}
>
{value === index && (
<Box p={3}>
<Typography>{children}</Typography>
</Box>
)}
</div>
);
}
TabPanel.propTypes = {
children: PropTypes.node,
index: PropTypes.any.isRequired,
value: PropTypes.any.isRequired,
};
function a11yProps(index) {
return {
id: `simple-tab-${index}`,
'aria-controls': `simple-tabpanel-${index}`,
};
}
var importErg = new Boolean(false);
export function getImport(){
return importErg;
}
export const globalErg = {
onoma: "",
epitheto: ""
}
export function getGlobalErg(){
return globalErg;
}
async function getErgByeID(ErgEid){
globalErg.onoma = ""
globalErg.epitheto = ""
await fetch(URL+"/ergazomenoi?eid=eq."+ErgEid)
.then(response => {if(response.ok){
return response.json()
}
else {
alert('Something went wrong')
throw new Error('Something went wrong');
}
})
.then(data => {
globalErg.onoma = data[0].onoma
globalErg.epitheto = data[0].epitheto
}
)
}
export default function SimpleTabs() {
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
function more(ergID){
setValue(1);
getErgByeID(ergID);
}
}
return (
<div className="main">
<AppBar position="static" id = "topbar">
<Tabs value={value} onChange={handleChange}>
<Tab label="Employees" {...a11yProps(0)}/>
<Tab label="Contact" {...a11yProps(1)} />
</Tabs>
</AppBar>
<TabPanel value={value} index={0}>
<Table />
<Button style={{color: "#fff", background: "#111", marginRight: "2.5px", marginLeft:"2.5px", marginTop:"5px"}} onClick={() => more()}>
Contact
</Button>
</TabPanel>
<TabPanel value={value} index={1} id = 'tab'>
<Contact/>
</TabPanel>
</div>
);
}
the form component
import React, { Component, useEffect } from "react";
import {getGlobalErg} from "./Proswpiko-tabs";
class Personal_info extends Component {
constructor(props){
super(props);
let erg = getGlobalErg();
this.state = {
onoma: erg.onoma,
epitheto: erg.epitheto,
};
}
onomaChangeHandler = (event) => {
this.setState({onoma: event.target.value});
}
epithetoChangeHandler = (event) => {
this.setState({epitheto: event.target.value});
}
render() {
return (
<form onSubmit = {this.SubmitHandler}>
<div >
<p id = "topText" align = "center">
<h2>Contact info</h2>
</p>
<img id="top" src="top.png" alt=""></img>
<div id="form_container">
<form id="form" class="appnitro" method="post" action="">
<div class="form_description">
<h2>Personal info</h2>
</div>
<ul>
<li id = "li_3">
<label class="description" for="element_3" >Όνομα </label>
<span>
<input type ="text" id="nameInput" name= "nameInput" class="element text" maxLength="255" size="15" onChange={this.onomaChangeHandler} value = {this.state.onoma} required/>
<label>Name</label>
</span>
<span>
<input type ="text" id="surNameInput" name= "surNameInput" class="element text" maxLength="255" size="14" onChange={this.epithetoChangeHandler} value = {this.state.epitheto} required/>
<label>Surname</label>
</span>
</li>
</ul>
</form>
<div id="footer">
</div>
</div>
<img id="bottom" src="bottom.png" alt=""></img>
</div>
</form>
);}}
export default Personal_info;
It seems that since the setState func is async It didnt had time to fill the imput boxes.
Solution: Added setTimeout and now everything works fine
I'm having weird problem in React JS. I have two classes named as Notes.js and DataTables.js
I'm using DataTables in Note.js like this
<DataTables
keyField="id"
columns={columns}
url={this.state.url}
useCallBack={true}
onEdit={this.onEdit}
/>
Please Note that DataTables.js is my own custom created DataTable.js not react-datatable.
All the work like fetching data from URL and showing it in tabular form is in DataTables.js file.
Note.js Code:
import React, { Component } from "react";
import { Constant } from "../shared/Constants";
import DataTables from "../shared/DataTables";
import { Modal, Button } from "react-bootstrap";
import BreadCrumb from "../shared/BreadCrumb";
import "../Style.css";
const columns = Constant.notes;
export class Notes extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
url: "notes/get_notes",
showModal: false,
note: [],
};
this.onEdit = this.onEdit.bind(this);
this.onAdd = this.onAdd.bind(this);
this.onUpdate = this.onUpdate.bind(this);
this.saveNote = this.saveNote.bind(this);
}
onUpdate(key, value) {
let noteData = this.state.note;
noteData[key] = value;
this.setState({
note: noteData,
});
}
saveNote(e) {
e.preventDefault();
}
onEdit(n) {
this.setState({
note: n,
showModal: true,
});
}
onAdd() {
this.setState({
note: [],
showModal: true,
});
}
render() {
return (
<>
<Modal
show={this.state.showModal}
aria-labelledby="example-modal-sizes-title-lg"
onHide={() => this.setState({ showModal: false })}
>
<form method="post" onSubmit={this.saveNote}>
<Modal.Header>
<Modal.Title>My Note</Modal.Title>
</Modal.Header>
<Modal.Body>
<div className="row">
<div className="col-sm-12">
<div className="form-group">
<label className="text-muted">Note Title</label>
<input
type="text"
placeholder="Note Title"
className="form-control"
ref="title"
value={this.state.note.title}
onChange={(e) => this.onUpdate("title", e.target.value)}
/>
</div>
<div className="form-group">
<label className="text-muted">Content</label>
<textarea
onChange={(e) => this.onUpdate("content", e.target.value)}
className="form-control"
style={{ height: "250px" }}
placeholder="Content"
>
{this.state.note.content}
</textarea>
</div>
</div>
</div>
</Modal.Body>
<Modal.Footer>
<Button
variant="secondary"
onClick={() => this.setState({ showModal: false })}
>
Close
</Button>
<Button type="submit" variant="primary">
Save Note
</Button>
</Modal.Footer>
</form>
</Modal>
<BreadCrumb
title="My Notes"
useCallBack={true}
onAdd={this.onAdd}
active_link="Notes"
link=""
link_text="Add New"
/>
<div className="row">
<div className="col-sm-12">
<div className="card">
<div className="card-body">
<div className="card-title">Notes</div>
<DataTables
keyField="id"
columns={columns}
url={this.state.url}
useCallBack={true}
onEdit={this.onEdit}
/>
</div>
</div>
</div>
</div>
</>
);
}
}
export default Notes;
I'm having Problem in Note.js on onUpdate function
onUpdate(key, value) {
let noteData = this.state.note;
noteData[key] = value;
this.setState({
note: noteData,
});
}
Problem: When I update a field in Modal as you can see in my code, then my Table in DataTable.js automatically gets updated, I'don't why :/
Here is DataTables.js function where I'm sending data to onEdit function
const TableData = () => {
return (
<tbody>
{tableData.length === 0 ?
<tr>
<td className="text-center" colSpan="5"><strong>No Data Found</strong></td>
</tr>
:
tableData.map((tData) => (
<tr key={tData[this.props.keyField]}>
{this.props.columns.map((item, index) => (
<td key={index} className="table-content">
{index === 0 ?
[(useCallback === true ? <span key={"sub_"+index} className="link" onClick={() => this.props.onEdit(tData)}>{tData[item.dataField]}</span> :
<Link
to={
this.props.edit_link +
"/" +
tData[this.props.edit_key_first] + (this.props.edit_key_second ? "/" +
tData[this.props.edit_key_second] : '')
}
>
{tData[item.dataField]}
</Link>
)]
: (
tData[item.dataField]
)}
</td>
))}
</tr>
))}
</tbody>
);
};
Please check gif image below so you can understand it :P
You have an onChange function that is updating the content
onChange={(e) => this.onUpdate("content", e.target.value)}
If you don't want to change the content while typing then you will have to remove this.
--FieldSection.js--
import React, { Component } from 'react';
import Field from './Field.js';
class FieldSection extends Component{
constructor(props){
super(props);
this.state ={
numberOfFields: 1
}
}
addField = () => {
const { numberOfFields } = this.state;
this.setState({ numberOfFields: numberOfFields + 1 });
}
listFields = (numberOfFields) => {
var fields = [];
for(var i=0; i<numberOfFields; i++){
fields.push(
(<Field number={i} />)
)
}
return fields;
}
render () {
const {listFields, addField} = this;
const {numberOfFields} = this.state;
return (
<div>
<label><u>Fields</u></label>
{listFields(numberOfFields)}
<div id="fieldButtons">
<button id="addField" type="button" onClick={addField}> Add Field </button>
<button id="removeField" type="button"> Remove Field </button>
</div>
</div>
)
}
}
export default FieldSection;
-----------------Field.js-------------------
import React from 'react';
class Field extends React.Component {
constructor(props){
super(props);
this.state = {
value: 'empty',
specVisible: 'hidden',
display: 'none'
};
}
SelectChange = (event) => {
this.setState({value: event.target.value});
if(event.target.value === "string" )
{
this.setState({specVisible: 'visible'});
this.setState({display: 'block'});
}
else {
this.setState({specVisible: 'hidden'})
this.setState({display: 'none'})
}
}
render (){
const {SelectChange} = this;
const {value, specVisible, display} = this.state;
return (
<div>
<div>
<label><strong>New Field </strong></label>
<div id="remove-" className="remove" style={{display: "inline", visibility: "hidden"}}>
<label> --Remove </label> <input type="checkbox" id="removeBox" className="rmvCheckbox" />
<br />
</div>
<label> Name: </label>
<input id="name-" className="name" type="text" name="name" /> <br />
<label> Description: </label>
<input id="description-" className="description" name="description" /> <br />
<label> Datatype: </label>
<select value={value} onChange={SelectChange} id={`selectData-${this.props.number}`} className="selectData" name="selectData" /*onClick={AddListener}*/>
<option value="empty"> </option>
<option value="string"> String </option>
<option value="character"> Character </option>
<option value="timestamp"> Timestamp </option>
<option value="integer"> Integer </option>
<option value="long"> Long </option>
<option value="double"> Double </option>
<option value="boolean"> Boolean </option>
</select> <br />
</div>
<div id={`specifySection-${this.props.number}`} className="specifySection" style={{visibility: specVisible, display: display}} >
<label> Specify Length: </label>
<input className="specifyLength" type="text" name="length"/> <br />
</div>
</div>
)}
}
export default Field
I am trying to implement a feature where you click "Remove Field" button and a list of checkboxes next to all the new fields appears. Whenever you confirm the deletion, it would delete all the elements that are selected.
Obviously I could subtract one to the numberOfFields state, however I want to delete specific elements, rather than just the last field.
What would that look like?
You can do it as follows. The basic idea is to get all the ids of the fields that need to be deleted and iterate over them and delete all the components corresponding to these ids.
Sandbox for code
When addField is called fields state of FieldsSelection
component is updated by adding a key with unique id, with the Field
component as its value along with all the props.
The remove state tracks if remove Field has been clicked and
toggles the remove checkbox in each Field component by passing it
as a prop.
fieldsToRemove state is updated via the markFields prop in
Field component each time a remove field checkbox is clicked.
When deleteFields is called, it iterates over the fieldsToRemove
state and removes the corresponding components from the fields
state object.
I used uuid package for unique ids for each Field as opposed to deleting
via index, which is not a great way and also conflicts with the key prop of
react.
FieldSection.js
import React, { Component } from "react";
import Field from "./Field.js";
import { v4 } from "uuid";
class FieldSection extends Component {
constructor(props) {
super(props);
this.state = {
fields: {},
remove: false,
fieldsToRemove: []
};
}
addField = () => {
const fields = this.state.fields;
const id = v4();
fields[id] = <Field key={id} id={id} mark={this.markFields} />;
this.setState({ fields });
};
listFields = () => {
var ids = Object.keys(this.state.fields);
return ids.map(id => {
return React.cloneElement(this.state.fields[id], {
remove: this.state.remove
});
});
};
markFields = (checked, i) => {
if (checked) {
const arr = [...this.state.fieldsToRemove];
arr.push(i);
this.setState({ fieldsToRemove: arr });
} else {
const arr = this.state.fieldsToRemove.filter(x => i !== x);
this.setState({ fieldsToRemove: arr });
}
};
removeFields = () => {
this.setState({ remove: !this.state.remove });
};
deleteFields = () => {
const fields = { ...this.state.fields };
this.state.fieldsToRemove.forEach(id => {
delete fields[id];
});
this.setState({ fields, fieldsToRemove: [], remove: false });
};
render() {
const { listFields, addField, removeFields, deleteFields } = this;
const { numberOfFields, remove } = this.state;
return (
<div>
<label>
<u>Fields</u>
</label>
{listFields()}
<div id="fieldButtons">
<button id="addField" type="button" onClick={addField}>
{" "}
Add Field{" "}
</button>
<button id="removeField" type="button" onClick={removeFields}>
{" "}
Remove Field{" "}
</button>
<br />
<button type="button" onClick={deleteFields}>
{" "}
Delete Fields{" "}
</button>
</div>
</div>
);
}
}
export default FieldSection;
Field.js
import React from "react";
class Field extends React.Component {
constructor(props) {
super(props);
this.state = {
value: "empty",
specVisible: "hidden",
display: "none"
};
}
SelectChange = event => {
this.setState({ value: event.target.value });
if (event.target.value === "string") {
this.setState({ specVisible: "visible" });
this.setState({ display: "block" });
} else {
this.setState({ specVisible: "hidden" });
this.setState({ display: "none" });
}
};
render() {
const { SelectChange } = this;
const { value, specVisible, display } = this.state;
const styles = this.props.remove
? { display: "inline", visibility: "visible" }
: { display: "inline", visibility: "hidden" };
return (
<div>
<div>
<label>
<strong>New Field </strong>
</label>
<div id="remove-" className="remove" style={styles}>
<label> --Remove </label>{" "}
<input
type="checkbox"
id="removeBox"
className="rmvCheckbox"
onChange={e => {
this.props.mark(e.target.checked, this.props.id);
}}
/>
<br />
</div>
<label> Name: </label>
<input id="name-" className="name" type="text" name="name" /> <br />
<label> Description: </label>
<input
id="description-"
className="description"
name="description"
/>{" "}
<br />
<label> Datatype: </label>
<select
value={value}
onChange={SelectChange}
id={`selectData-${this.props.number}`}
className="selectData"
name="selectData" /*onClick={AddListener}*/
>
<option value="empty"> </option>
<option value="string"> String </option>
<option value="character"> Character </option>
<option value="timestamp"> Timestamp </option>
<option value="integer"> Integer </option>
<option value="long"> Long </option>
<option value="double"> Double </option>
<option value="boolean"> Boolean </option>
</select>{" "}
<br />
</div>
<div
id={`specifySection-${this.props.number}`}
className="specifySection"
style={{ visibility: specVisible, display: display }}
>
<label> Specify Length: </label>
<input className="specifyLength" type="text" name="length" /> <br />
</div>
</div>
);
}
}
export default Field;
I am getting this error, but I thought this pertains to binding functions improperly.
Uncaught TypeError: this.seState is not a function
Essentially I have some data that I would like to filter using radio buttons.
Selecting a button of a particular value should only cause those objects with that value as their property to be rendered.
import React, { Component } from 'react';
import { Card, Select, Segment, Container, Divider, Grid, Header, Image } from 'semantic-ui-react';
import '../css/app.css';
class FilterOptions extends Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data,
priority: '',
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
var val = e.target.value;
this.setState({ priority: val });
this.props.changeOption(val);
}
render() {
return (
<div>
<ul>
<li>
<label>
<input type="radio" value="1" checked={this.state.priority === '1'} onChange={this.handleChange} />
1
</label>
</li>
<li>
<label>
<input type="radio" value="2" checked={this.state.priority === '2'} onChange={this.handleChange} />
2
</label>
</li>
<li>
<label>
<input type="radio" value="3" checked={this.state.priority === '3'} onChange={this.handleChange} />
3
</label>
</li>
<li>
<label>
<input type="radio" value="4" checked={this.state.priority === '4'} onChange={this.handleChange} />
4
</label>
</li>
</ul>
</div>
);
}
}
function FilterUsers(props) {
return (
<Container>
<br />
<br />
<Grid columns={3} doubling stackable>
{props.data.map((user) => (
<Grid.Column key={user.name}>
<Segment>
<Card>
<Card.Content>
<Card.Header>
<h2>name: {user.name}</h2>
</Card.Header>
<Card.Meta>
<span className="card__age">age: {user.age}</span>
</Card.Meta>
<Card.Description>priority: {user.priority}</Card.Description>
<Card.Description className="card__catergory">category: {user.category}</Card.Description>
</Card.Content>
</Card>
</Segment>
</Grid.Column>
))}
</Grid>
</Container>
);
}
export default class SortAndFilterForm extends Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data,
priority: '',
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(val) {
this.setState({ priority: val });
// var filteredByPriority = this.props.data.sort((a, b) => a.priority - b.priority);
var filteredByPriority = this.props.data.filter(function(item) {
return item.priority === val;
});
this.seState({ data: filteredByPriority });
console.log(filteredData, val);
}
render() {
return (
<div>
<h1>Sorts</h1>
<FilterOptions data={this.state.data} changeOption={this.handleChange} />
<FilterUsers data={this.state.data} />
</div>
);
}
}
Any help would be appreciated!
Change line from
this.seState({ data: filteredByPriority });
to
this.setState({ data: filteredByPriority });
Seems like a typo error. It's this.setState not this.seState.
Change it to: this.setState({ data: filteredByPriority });
I'm trying to build a back-office where you can add / update / delete projects for a showroom.
When you want to add a new project, I have a model which open and display 4 languages.
Each language is a collapsing div onClick.
So I instantiate them this way in the render method of my main component:
<Modal
isOpen={this.state.addIsOpen}
onAfterOpen={this.afterOpenModal}
onRequestClose={this.closeModal}
style={customStyles}
contentLabel="Example Modal"
>
<h2 ref="subtitle">Add a new Inspiration</h2>
{
languages.map((lang, i) => {
return (
<FormLanguage
key={i}
lang={lang}
/>
);
})
}
<button onClick={this.closeModal}>Finish!</button>
</Modal>
The form language, another container is then instantiated this way:
render() {
return (
<form onSubmit={this.addProject} style={{marginTop: 35, marginBottom: 50}}>
<h2 onClick={this.expand}>{this.props.lang} language</h2>
<div style={{display: this.state.showMore ? "block" : "none"}}>
<label>
Title:<br />
<textarea value={this.state.titles.lang} onChange={this.handleTitle} />
</label>
<br />
<label>
Description:<br />
<div style={{marginTop: 20, marginBottom: 20}}>
<RichEditorExample />
</div>
</label>
<br />
<input type="submit" value="Submit" />
</div>
</form>
);
}
But then, when I try to type text, I figured out that all my textEditor are filling at the same time.
The render method of the texteditor (draftjs):
return (
<div className="RichEditor-root">
<BlockStyleControls
editorState={editorState}
onToggle={this.toggleBlockType}
/>
<InlineStyleControls
editorState={editorState}
onToggle={this.toggleInlineStyle}
/>
<div className={className} onClick={this.focus}>
<Editor
blockStyleFn={getBlockStyle}
customStyleMap={styleMap}
editorState={editorState}
handleKeyCommand={this.handleKeyCommand}
onChange={this.onChange}
onTab={this.onTab}
ref="editor"
spellCheck={true}
/>
</div>
</div>
);
With the constructor in charge of the onChange:
constructor(props) {
super(props);
this.focus = () => this.refs.editor.focus();
this.onChange = (editorState) => {
const { dispatch } = this.props;
dispatch(updateText(editorState));
};
So, I'm like "damn, what am I missing here?".
Should I iterate inside of the form instead of doing it in the parent?
EDIT:
As asked in the question, I'm following the Redux pattern, so here are the action / reducer methods:
export const UPDATE_TEXT = 'UPDATE_TEXT';
export function updateText(editorState) {
return {
type: UPDATE_TEXT,
editorState
};
};
And the reducer:
export function editorText(state = {}, action) {
switch (action.type) {
case UPDATE_TEXT:
return action.editorState;
default:
return state;
};
};