getting errors in retrieving information through inputs - reactjs

Question

I've written my code using semantic-ui-react and react redux, created a compose UI and when we pass inputs to the field it is showing error like this
"TypeError: Cannot read property 'value' of undefined"
I'm trying this using semantic-ui-react and react-redux
import React, { Component } from 'react'
import { Button, Header, Icon, Modal, Form} from 'semantic-ui-react';
import { connect } from "react-redux";
class Compose extends Component {
handleSubmit = (e) => {
e.preventDefault();
console.log("button triggered")
const From = this.getFrom.value;
const To = this.getTo.value;
const Subject = this.getSubject.value;
const outboxMessage = {
From,
To,
Subject
}
console.log(outboxMessage)
}
render() {
return (
<Modal trigger={<Button animated inverted color='blue'>
<Button.Content visible>Compose</Button.Content>
<Button.Content hidden>
<Icon name='plus'/>
</Button.Content>
</Button>} closeIcon>
<Modal.Content>
<Form onSubmit={this.handleSubmit}>
<Form.Input fluid label='From' type="text" ref={(input)=>this.getFrom = input} />
<Form.Input fluid label='To' type="text" ref={(input)=>this.getTo = input}/>
<Form.Input fluid label='Cc' type="text" ref={(input)=>this.getTo = input}/>
<Form.Input fluid label='Bcc' type="text" ref={(input)=>this.getTo = input}/>
<Form.Input fluid label='Subject' type='text'ref={(input)=>this.getSubject = input}/>
</Form>
<Button animated inverted color='blue' id='sendBtn'>
<Button.Content visible>Send</Button.Content>
<Button.Content hidden>
<Icon name='envelope'/>
</Button.Content>
</Button>
<Button animated inverted color='red'><Button.Content visible>Discard</Button.Content>
<Button.Content hidden>
<Icon name='remove circle'/>
</Button.Content>
</Button>
</Modal.Content>
</Modal>
);
}
}
export default Compose;
"In redux folder, reducer file:"
import actions from './actions';
const initialState = {
outboxMessage: []
}
const emailReducer = (state = initialState, action) => {
switch (action.type) {
case actions.OUTBOX_MESSAGE:
return {
...state,
outboxMessage: state.outboxMessage.concat([action.outboxMessage])
};
default:
return state;
}
}
export default emailReducer;
"In Index.js, mofidied in this way:"
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import emailReducer from './components/redux/reducer';
const store = createStore(emailReducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, document.getElementById('root'));
I'm getting error Like this:
Compose.handleSubmit [as onSubmit]
F:/compose/src/components/Email/Compose.js:14
11 |
12 | handleSubmit = (e) => {
13 | e.preventDefault();
> 14 | const to = this.getTo.value;
| ^ 15 | const cc = this.getCc.value;
16 | const bcc = this.getBcc.value;
17 | const subject = this.getSubject.value;

Answer 1

You can make use of state, which is a cleaner way as well.
Maintain a state for all your input's.
state = {
from: "",
to: "",
cc: "",
bcc: "",
subject: ""
}
Now you can have Controlled Component.
We need name, value and onChange properties on input.
<Form onSubmit={this.handleSubmit}>
<Form.Input fluid label='From' type="text" name="from" value={this.state.from} onChange={this.changeHandler}/>
<Form.Input fluid label='To' type="text" name="to" value={this.state.to} onChange={this.changeHandler}/>
<Form.Input fluid label='Cc' type="text" name="cc" value={this.state.cc} onChange={this.changeHandler}/>
<Form.Input fluid label='Bcc' type="text" name="bcc" value={this.state.bcc} onChange={this.changeHandler}/>
<Form.Input fluid label='Subject' type='text' name="subject" value={this.state.subject} onChange={this.changeHandler}/>
</Form>
Now your change handler would be,
changeHandler = (e) => {
this.setState({
[e.target.name] : e.target.value
})
}
And finally you can use values from state,
handleSubmit = (e) => {
e.preventDefault();
console.log("button triggered")
//Get the values from state
const From = this.state.from;
const To = this.state.to;
const Subject = this.state.subject;
const outboxMessage = {
From,
To,
Subject
}
console.log(outboxMessage)
}