Playing with react, trying to build a simple chat app that will be connected to firebase.
I have one container - ChatApp - and one component UserInput.
ChatApp ->
import React from 'react';
import UserInput from '../components/UserInput';
export default React.createClass({
getInitialState: function() {
return {
chatting: false
};
},
render: function() {
return <div>
<UserInput
startChat={this.chatCanStart}
/>
</div>;
},
chatCanStart: function(recipient) {
console.log(recipient);
this.setState({
chatting: true
})
}
});
UserInput ->
import React from 'react';
export default React.createClass({
getInitialState: function() {
return {
username: '',
recipient: 'asgasg'
};
},
handleUsernameChange: function(event) {
let text = event.target.text;
this.setState({
username: text
});
},
handleRecipientChange: function(event) {
let text = event.target.text;
this.setState({
recipient: text
});
},
handleStartChat: function() {
if (this.state.username !== '' && this.state.recipient !== ''){
console.log(this.state.recipient);
this.props.startChat(this.state.recipient);
}
},
render: function() {
return <div className="panel panel-default">
<div className="panel-heading"> Welcome to the chat app done in React </div>
<div className="panel-body">
<div className="input-group">
<span className="input-group-addon"> Username </span>
<input type="email" className="form-control" value={this.state.username} onChange={this.handleUsernameChange} />
</div>
<br />
<div className="input-group">
<span className="input-group-addon"> Recipient </span>
<input type="email" className="form-control" value={this.state.recipient} onChange={this.handleRecipientChange} />
</div>
<br />
<button type="button" className="btn btn-primary" onClick={this.handleStartChat}> Chat now </button>
</div>
</div>;
}
});
When I change the Username and Recipient fields and then click on the Chat now button, I am expecting the chatting state in the ChatApp container to change to true and also want to log the passed recipient.
But I get 'undefined', why is that? I get 'undefined' even in the console.log in the UserInput component. Even though the inputs value in the form is being changed just fine.
What am I doing wrong?
Thanks.
To get value from input you need to use .value property instead of .text
handleUsernameChange: function(event) {
let text = event.target.value;
this.setState({
username: text
});
},
handleRecipientChange: function(event) {
let text = event.target.value;
this.setState({
recipient: text
});
},
Example
Related
I am pretty new to the wonderful world of React.
I have two inputs passing data through from an API that renders a list of options. And I want to send the selected inputs from those options back to the parent in the input fields to display for another search.
I have tried passing state down to them and render them them optionally with both a ternary and an if else statement in the "SearchCityList" component in several ways but I either get both lists rendered and they would have to choose between one list that is doubled to put in each input field or it only puts the selected value in one input. Would appreciate any & all suggestions Thanks!
class Form extends Component {
state = {
showComponent: false,
showComponent2: false,
};
// open/close control over SearchCity component box
openSearch = () => {
this.setState({ showComponent: true });
};
openSearch2 = () => {
this.setState({ showComponent2: true });
};
closeSearch = () => {
this.setState({
showComponent: false,
showComponent2: false
});
};
// Passed down cb function to get selected city search in selectCity component
GoingTo = (flights) => {
this.setState({ GoingTo: [flights] });
};
LeavingFrom = (flights) => {
this.setState({ LeavingFrom: [flights] });
};
render() {
return (
<div>
<form className="form-fields container">
<div className="inputs">
<h1>Search for a flight!</h1>
<div className="depart">
<input
onClick={this.openSearch}
className="flight-search"
placeholder="Leaving From"
value={this.state.LeavingFrom}
></input>
<input type="date"></input>
</div>
<div className="Returning">
<input
onClick={this.openSearch2}
className="flight-search"
placeholder="Going To "
value={this.state.GoingTo}
></input>
<input type="date" placeholder="Returning"></input>
</div>
</div>
<button>Check Flights!</button>
</form>
{this.state.showComponent || this.state.showComponent2 ? (
<SearchCity
openSearch={this.openSearch}
openSearch2={this.openSearch2}
flightSearch={this.state.flightSearch}
closeSearch={this.closeSearch}
GoingTo={this.GoingTo}
LeavingFrom={this.LeavingFrom}
onSearchSubmission={this.onSearchSubmission}
closeSearch={this.closeSearch}
/>
) : null}
</div>
);
}
}
export default Form;
class SearchCity extends Component {
state = {
LeavingFrom: "",
GoingTo: "",
search: "",
flightSearch: [],
};
// Search submission / api call
onSearchSubmission = async (search) => {
const response = await Axios.get(
{
headers: {
"
useQueryString: true,
},
}
);
// set New state with array of searched flight data sent to searchCity component
const flightSearch = this.setState({ flightSearch: response.data.Places });
};
// Callback function to send search/input to parent "Form" component
submitSearch = (e) => {
e.preventDefault();
this.onSearchSubmission(this.state.search);
};
// closeSearch callback function sent from Form component to close pop up search box when X is pressed
closeSearch = () => {
this.props.closeSearch();
};
render() {
return (
<div className="container search-list">
<form onChange={this.submitSearch}>
<i className="fas fa-times close-btn" onClick={this.closeSearch}></i>
<input
onChange={(e) => this.setState({ search: e.target.value })} //query-search api
value={this.state.search}
className="search-input"
type="text"
placeholder="Search Locations"
></input>
<div className="search-scroll">
<SearchCityList
openSearch={this.props.openSearch}
openSearch2={this.props.openSearch2}
LeavingFrom={this.props.LeavingFrom}
GoingTo={this.props.GoingTo}
flightSearch={this.state.flightSearch}
/>
</div>
</form>
</div>
);
}
}
export default SearchCity;
function SearchCityList({ flightSearch, LeavingFrom, GoingTo }) {
const renderList = flightSearch.map((flights) => {
return (
<div>
<SelectCityLeaving LeavingFrom={LeavingFrom} flights={flights} />
<SelectCityGoing GoingTo={GoingTo} flights={flights} />
</div>
);
});
return <div>{renderList}</div>;
}
export default SearchCityList;
First of all, when dealing with state, make sure you initialize in the constructor and also ensure you bind your handlers to this component instance as this will refer to something else in the handlers if you don't and you won't be able to call this.setState().
constructor(props) {
super(props); // important
state = {
// your state
};
// make sure to bind the handlers so `this` refers to the
// component like so
this.openSearch = this.openSearch.bind(this);
}
I have the following two components App.js and PersonalInfo.js:
App.js
import React, { Component } from "react";
import "./styles.css";
import PersonalInfo from "./PersonalInfo";
class App extends Component {
state = [{ fname: "Jonny", lname: "Deep" }, { fname: "test", lname: "test" }];
inputChangeHandler = event => {
this.setState({
...this.state,
[event.target.name]: event.target.value
});
};
render() {
return (
<div className="App">
<PersonalInfo
data={this.state}
inputChangeHandler={this.inputChangeHandler}
/>
</div>
);
}
}
export default App;
PersonalInfo.js
import React from "react";
const PersonalInfo = props => {
const test = props.data.map((x, i) => {
return (
<div className="form-row align-items-center">
<div className="col-sm-3 my-1">
<label className="sr-only">First Name</label>
<input
type="text"
className="form-control"
id="inlineFormInputName"
name="fname"
value={x.fname}
onChange={props.inputChangeHandler}
/>
</div>
<div className="col-sm-3 my-1">
<label className="sr-only">Last Name</label>
<div className="input-group">
<input
type="text"
className="form-control"
id="inlineFormInputGroupUsername"
name="lname"
value={x.lname}
onChange={props.inputChangeHandler}
/>
</div>
</div>
<div className="col-auto my-1">
<button type="submit" className="btn btn-primary">
Add
</button>
<button type="submit" className="btn btn-danger">
Remove
</button>
</div>
</div>
);
});
return (
<div className="container">
<form>{test}</form>
<pre>{JSON.stringify(props, null, 2)}</pre>
</div>
);
};
export default PersonalInfo;
With the above code I'm getting error of props.data.map is not a function when I type in the input field. If I comment out or remove onChange={props.inputChangeHandler} it works. But onChange to update the state.
How do I remove the error and make it work ?
Here is the sandbox link: https://codesandbox.io/s/sharp-leakey-ub859?file=/src/App.js
Your inputChangeHandler is wrong, your updating an array using an object. So when you call it your array became an object like this { key: value }.
To achieve your goal you'll need a unique ID to easily find your data inside your array and then you need to modify this array :
state = [{ id: 1, fname: "Jonny", lname: "Deep" }, { id: 2, fname: "test", lname: "test" }]
inputChangeHandler = (event, id) => {
this.setState((prev) => {
const indexOfName = prev.findIndex(x => x.id === id);
prev[indexOfName][event.target.name] = event.target.value;
return prev;
})
}
And you need also to change the way you call it :
<input
type="text"
className="form-control"
id="inlineFormInputName"
name="fname"
value={x.fname}
onChange={(event) => props.inputChangeHandler(event, x.id)}
/>
I made a small working example using the index instead of id : https://codesandbox.io/embed/nifty-napier-ps86v?fontsize=14&hidenavigation=1&theme=dark
I already built the form in React and it shows the input fields in red borders that'll change to regular borders once someone types it in. I used this example from this React form article link So everything is working except I wanted to add the error message under the input field that displays "Please fill in the blank field" that will disappear once someone starts typing in the field. How do I do this?
Here's my code in Form.js:
import React, { Component } from 'react';
import FormField from './FormFieldBox';
function validate(name, isin) {
// true means invalid, so our conditions got reversed
return {
name: name.length === 0,
isin: isin.length === 0
};
}
export default class PopupForm extends Component {
constructor(props) {
super(props)
this.state = {
name: '',
isin: '',
country: '',
errormessage: ''
}
}
updateInput = (e) =>{
this.setState({[e.target.name]: e.target.value})
}
closePopupSubmit = (e) => {
if (!this.canBeSubmitted()) {
e.preventDefault();
}
let security = { //1.gather security data from form submit
name: this.state.name,
isin: this.state.isin,
country: this.state.country
}
this.props.submitPopup(security); //2.closePopup function, add security data
}
canBeSubmitted() {
const errors = validate(this.state.name, this.state.isin);
const isDisabled = Object.keys(errors).some(x => errors[x]);
return !isDisabled;
}
cancelPopupSubmit = (e) => {
e.preventDefault()
this.props.cancelPopup();
}
render() {
const errors = validate(this.state.name, this.state.isin);
const isDisabled = Object.keys(errors).some(x => errors[x]);
return (
<div className='popup'>
<div className='popup-inner'>
<form onSubmit={this.closePopupSubmit}>
<FormField onChange={this.updateInput} className={errors.name ? "input error" : "input"} label="Name" type="text" name="name" value={this.state.name} />
<FormField onChange={this.updateInput} className={errors.isin ? "input error" : "input"} label="ISIN" type="text" name="isin" value={this.state.isin} />
<FormField onChange={this.updateInput} label="Country" type="text" name="country" value={this.state.country} />
<button type="button" onClick={this.cancelPopupSubmit} className="button">Cancel</button>
<button type="submit" className="button" disabled={isDisabled}>Submit</button>
</form>
</div>
</div>
)
}
}
And my component FormField.js
import React from "react";
const FormBox = props => {
return (
<div className="field">
<label className="label">{props.label}</label>
<div className="control">
<input onChange={props.onChange}
className={props.className}
type={props.type}
name={props.name}
value={props.value}
placeholder={props.placeholder} />
{/* {props.errormessage} */}
</div>
</div>
)
}
export default FormBox;
const FormBox = props => {
return (
<div className="field">
<label className="label">{props.label}</label>
<div className="control">
<input onChange={props.onChange}
className={props.className}
type={props.type}
name={props.name}
value={props.value}
placeholder={props.placeholder} />
</div>
{Boolean(props.value.length) || (
<div className="err-msg">
Please fill in the blank field
</div>
)}
</div>
)
}
There are two ways you can achieve this
First : oninvalid attribute in HTML5 and calling a custom function on that.
Second : along with each element name object in state have a length attribute. In validation function you can check for the length and throw a custom error that you want to display.
I'm having hard time writing test unit with Jest :/ Here is my code:
import { NewRec } from '../src/components/edit';
import { shallow } from 'enzyme';
import React from 'react/lib/ReactWithAddons';
jest.mock('react-dom');
jest.mock('react/lib/ReactDefaultInjection');
describe('NewRec component', () => {
const component = shallow(<NewRec />);
it('returns true if blah blah', ()=>{
const p = component.find('errortitle');
expect(p.length).toEqual(1)
});
});
P is always 0. I tried to check how the component looks like after rendering. Asked the question here: (How to see what the rendered React component looks like in the Jest unit test?)
The snapshot file says it's null:
exports[`NewRec component returns true if blah blah 1`] = `null`;
So why it's always null? What is the problem in the code? The "NewRec" component is using mixins (mixins: [React.addons.LinkedStateMixin]). Can that cause the problem?
UPDATE: Here is the component code:
export const NewRec = React.createClass({
mixins: [React.addons.LinkedStateMixin],
getInitialState() {
return {
group_id: null,
title: "",
errors: {},
}
},
createRec(event) {
event.preventDefault();
if (!this.state.title.length) {
this.setError('title', "Please add a title");
return;
}
if (!this.state.group_id) {
this.setError('group', "Please select a group");
return;
}
serverCache.createRec(
{ group: this.state.group_id, title: this.state.title },
rec => { browser.gotoRec(rec.id); }
);
},
selectgroup(group_id) {
this.setState({group_id: group_id});
},
rendergroupList(groups) {
return (
<div > { groups.map(this.rendergroup) } </div>
);
},
onTitleChange(event) {
this.setState({title:event.target.value});
},
componentWillMount() {
const user = serverCache.getUser();
if (!user || !user.get('name')) {
notifications.warning('Please login first.');
}
},
render() {
const user = serverCache.getUser();
const groups = serverCache.getgroups();
return (
<div className="row">
<form className="form-horizontal" onSubmit={this.createRec}>
<label htmlFor="title" className="col-sm-3 control-label"> Title </label>
<div>
<input type="text" id='title' value={this.state.title} onChange={this.onTitleChange} />
</div>
<div>
<label htmlFor="group" className="col-sm-3 control-label" >group </label>
</div>
<div>
{this.state.errors.title ? <div id='errortitle' >{this.state.errors.title} </div>: false }
{this.state.errors.group ? <div id='errorgroup' >{this.state.errors.group} </div> : false }
<div >
<button type="submit" className="btn btn-primary btn-default btn-block"> Create Rec</button>
</div>
</div>
</form>
</div>
);
}
});
I think component.find('new-rec').length is 0 because there is no new-rec component, tag, or whatever you're looking for, I mean, wehen I see this code const p = component.find('new-rec'); I understand that you are trying to get a p tag with a new-rec class or something like that, But if you are looking for a class, then you have to do const p = component.find('.new-rec'); Note de dot before de word (css selector). But again it will be 0 because I don't see any p tag with a .new-rec class in the NewRec component.
I want to so some customization with checkbox, it can look like this:
so I wrap my custom checkbox into a React Component:
require('../../less/ck-checkbox.less');
var React = require('react');
var CkCheckbox = React.createClass({
propTypes: {
name: React.PropTypes.string,
text: React.PropTypes.string,
defaultChecked: React.PropTypes.bool,
onChange: React.PropTypes.func
},
getDefaultProps: function() {
return {
name: 'checkbox',
text: '',
defaultChecked: false,
onChange: function () {}
};
},
render: function() {
return (
<div className="ck-checkbox">
<label>
<input
type="checkbox"
name={this.props.name}
ref="c"
defaultChecked={this.props.defaultChecked}
onChange={this.props.onChange.bind(this, this.refs.c.checked)}
/>
<span className="icons">
<span className="icon-checked-o icon-true"></span>
<span className="icon-circle-o icon-false"></span>
</span>
{this.props.text.length > 0 ?
<span className="ck-checkbox-text">{this.props.text}</span> : null
}
</label>
</div>
);
}
});
module.exports = CkCheckbox;
and my container is like this:
var React = require('react');
var CkCheckbox = require('./CkCheckbox.js');
var Test = React.createClass({
render: function() {
return (
<div>
<CkCheckbox onChange={this._handleChange}/>
</div>
);
},
_handleChange: function(checked, e) {
console.log(checked)
}
});
module.exports = Test;
you can see that, I tried to bind this.refs.c.checked in the onChange callback, but it doesn't work.
so, how can I get the checked state of my custom checkbox in Test component in the _handleChange function?
In this case you don't need use refs because you can get checked property from e argument
// CkCheckbox component
<input type="checkbox"
name={this.props.name}
defaultChecked={this.props.defaultChecked}
onChange={ this.props.onChange } />
// Test component
_handleChange: function(e) {
var checked = e.target.checked;
console.log(checked)
}
Example
or if you want pass only checked property you can do it like this
// CkCheckbox component
handleChange: function (e) {
this.props.onChange(e.target.checked);
},
<input type="checkbox"
name={this.props.name}
defaultChecked={this.props.defaultChecked}
onChange={ this.handleChange } />
// in Test component
_handleChange: function(checked) {
console.log(checked)
}
Example
This is a simple example you can use to get the custom value or the value of your checked box, and also to check if the box is checked.
export default class SearchBoxContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
boxAll: false
};
}
handleChange = event => {
this.setState({ boxAll: event.target.checked }, () => {
console.log("This returned true or false", this.state.boxAll);
});
};
render() {
return (
<div className="search-container">
<SearchBox />
<div className="filter-country">
<h1>Filter</h1>
<div className="filter-country-container">
<div>
<input
type="checkbox"
id="checkBoxUS"
name="US"
value="US"
onChange={this.handleChange}
/>
<label htmlFor="US">All Jobs</label>
</div>
</div>
</div>
</div>
);
}
}
It is important to know that in this example, I used the "setState()" callback just for demonstration purposes, but you can pass the value to other components by props or wherever method you prefer. Also, when the checkbox is checked the value will return "true"