The InputField & Button are custom components that go into a form to create a form. My issue is how do I send the data back up to form so that on button click, I can fire ajax on the form with data (username & password):
export default auth.authApi(
class SignUpViaEmail extends Component{
constructor(props){
super(props);
this.state = {
email : "",
password : ""
};
this.storeEmail = this.storeEmail.bind( this );
this.storePassword = this.storePassword.bind( this );
}
storeEmail(e){
this.setState({ email : e.target.value });
}
storePassword(e){
this.setState({ password : e.target.value });
}
handleSignUp(){
this.props.handleSignUp(this.state);
}
render(){
return(
<div className="pageContainer">
<form action="" method="post">
<InputField labelClass = "label"
labelText = "Username"
inputId = "signUp_username"
inputType = "email"
inputPlaceholder = "registered email"
inputClass = "input" />
<Button btnClass = "btnClass"
btnLabel = "Submit"
onClickEvent = { handleSignUp } />
</form>
</div>
);
}
}
);
Or Is it not recommended & I should not create custom child components within the form?
child component => InputField
import React,
{ Component } from "react";
export class InputField extends Component{
constructor( props ){
super( props );
this.state = {
value : ""
};
this.onUserInput = this.onUserInput.bind( this );
}
onUserInput( e ){
this.setState({ value : e.target.value });
this.props.storeInParentState({[ this.props.inputType ] : e.target.value });
}
render(){
return <div className = "">
<label htmlFor = {this.props.inputId}
className = {this.props.labelClass}>
{this.props.labelText}
</label>
<input id = {this.props.inputId}
type = {this.props.inputType}
onChange = {this.onUserInput} />
<span className = {this.props.validationClass}>
{ this.props.validationNotice }
</span>
</div>;
}
}
Error : I get the error e.target is undefined on the parent storeEmail func.
React's one-way data-binding model means that child components cannot send back values to parent components unless explicitly allowed to do so. The React way of doing this is to pass down a callback to the child component (see Facebook's "Forms" guide).
class Parent extends Component {
constructor() {
this.state = {
value: ''
};
}
//...
handleChangeValue = event => this.setState({value: event.target.value});
//...
render() {
return (
<Child
value={this.state.value}
onChangeValue={this.handleChangeValue}
/>
);
}
}
class Child extends Component {
//...
render() {
return (
<input
type="text"
value={this.props.value}
onChange={this.props.onChangeValue}
/>
);
}
}
Take note that the parent component handles the state, while the child component only handles displaying. Facebook's "Lifting State Up" guide is a good resource for learning how to do this.
This way, all data lives within the parent component (in state), and child components are only given a way to update that data (callbacks passed down as props). Now your problem is resolved: your parent component has access to all the data it needs (since the data is stored in state), but your child components are in charge of binding the data to their own individual elements, such as <input> tags.
Addendum
In response to this comment:
What if we render a list of the child component? Using this single source of truth in Lifting state up technique will let the parent controls all the state of all the child inputs right? So how can we access each of the value input in the child component to (which is rendered as list) from the parent component?
For this case, you may map a child component for each element in the list. For example:
class Parent extends Component {
//...
handleChangeListValue = index => event => {
this.setState({
list: this.state.list
.map((element, i) => i === index ? event.target.value : element)
});
}
//...
render() {
return this.state.list.map((element, i) => (
<Child
value={element}
onChangeValue={this.handleChangeListValue(i)}
/>
));
P.S. Disclaimer: above code examples are only for illustrative purposes of the concept in question (Lifting State Up), and reflect the state of React code at the time of answering. Other questions about the code such as immutable vs mutable array updates, static vs dynamically generated functions, stateful vs pure components, and class-based vs hooks-based stateful components are better off asked as a separate question altogether.
React class component
Parent.js
import React, { Component } from 'react';
import Child from './child'
class Parent extends Component {
state = {
value: ''
}
onChangeValueHandler = (val) => {
this.setState({ value: val.target.value })
}
render() {
const { value } = this.state;
return (
<div>
<p> the value is : {value} </p>
<Child value={value} onChangeValue={this.onChangeValueHandler} />
</div>
);
}
}
export default Parent;
Child.js
import React, { Component } from 'react';
class Child extends Component {
render() {
const { value , onChangeValue } = this.props;
return (
<div>
<input type="text" value={value} onChange={onChangeValue}/>
</div>
);
}
}
export default Child;
React hooks
Parent.js
import { useState } from "react";
import Child from "./child";
export default function Parent() {
const [value, changeValue] = useState("");
return (
<div>
<h1>{value}</h1>
<Child inputValue={value} onInputValueChange={changeValue} />
</div>
);
}
Child.js
export default function Child(props) {
return (
<div>
<input
type="text"
value={props.inputValue}
onChange={(e) => props.onInputValueChange(e.target.value)}/>
</div>
);
}
Parent.js
import SearchBar from "./components/SearchBar";
function App() {
const handleSubmit = (term) => {
//Log user input
console.log(term);
};
return (
<div>
<SearchBar onPressingEnter={handleSubmit} />
</div>
);
}
export default App;
Child.js
import { useState } from "react";
function SearchBar({ onPressingEnter }) {
const [UserSearch, setname] = useState("[]");
/* The handleChange() function to set a new state for input */
const handleChange = (e) => {
setname(e.target.value);
};
const onHandleSubmit = (event) => {
//prevent form from making a http request
event.preventDefault();
onPressingEnter(UserSearch);
};
return (
<div>
<form onSubmit={onHandleSubmit}>
<input
type="search"
id="mySearch"
value={UserSearch}
onChange={handleChange}
name="q"
placeholder="Search the site…"
required
/>
</form>
</div>
);
}
export default SearchBar;
You can add a "ref name" in your InputField so you can call some function from it, like:
<InputField
ref="userInput"
labelClass = "label"
labelText = "Username"
inputId = "signUp_username"
inputType = "email"
inputPlaceholder = "registered email"
inputClass = "input" />
So you can access it using refs:
this.refs.userInput.getUsernamePassword();
Where getUsernamePassword function would be inside the InputField component, and with the return you can set the state and call your props.handleSignUp
Related
I am trying to pass data from a class-based component to a functional-based component in react.
The class component is a react quill editor where I am trying to get the data typed in the editor (editorHtml) and pass the data to the functional component.
Below is the code in the class-based component
const CustomHeart = () => <span>♥</span>;
function insertHeart() {
console.log(this)
const Quilly = this.quill
const input = document.createElement("input");
input.setAttribute("type", "file");
input.click();
input.onchange = function(){
const cursorPosition = Quilly.getSelection().index;
Quilly.insertText(cursorPosition, "♥");
Quilly.insertEmbed(cursorPosition,"image","https://cdn.pixabay.com/photo/2022/01/05/22/31/woman-6918210_960_720.jpg");
Quilly.setSelection(cursorPosition + 1);
}
}
class Editor extends React.Component {
state = { editorHtml: "" };
handleChange = html => {
this.setState({ editorHtml: html });
};
static modules = {
toolbar: {
container: "#toolbar",
handlers: {
insertHeart: insertHeart
}
}
};
static formats = [
"header",
"font",
"size",
"bold"]
}
render() {
return (
<div className="text-editor">
<CustomToolbar />
<ReactQuill
value={this.state.editorHtml}
onChange={this.handleChange}
placeholder={this.props.placeholder}
modules={Editor.modules}
formats={Editor.formats}
/>
</div>
);
}
export default Editor
For the functional-based component
I am trying to pass the value of editorHtml to the functional component below
function SendEmail() {
return (
<Editor >
)
}
I know I can create both as functional component and use props in passing the data around but due to the use of this keyword in the insertHeart in the class component above... I couldn't use a functional approach
You should manage the state of editorHTML at the parent component and pass it down to Editor.
<Editor handleChange={this.handleChange} editorHtml={this.state.editorHTML} />
and access it through the props in Editor:
<ReactQuill
value={this.props.editorHtml}
onChange={this.props.handleChange}
placeholder={this.props.placeholder}
modules={Editor.modules}
formats={Editor.formats}
/>
After going around for a while I was able to get the solution by using the this.props method to access the setHtml method in the class component.This setHtml method takes in a string ...and I passed the value that I was getting from the editor to the setHtml method .... see below for the code to solve the problem....
class Editor extends React.Component {
state = { editorHtml: "" };
handleChange = (html) => {
this.setState({ editorHtml: html });
this.props.setHtml(html);
};
}
In the function component, i set the state of the setHtml and also pass the value of the value in the Html
function SendEmail() {
const [html, setHtml] = useState("");
{console.log(html)}//This would give you the value typed in your editor
<Editor setHtml = {setHtml} />
}
Hello friends I'm pretty new to React JS so I want to ask you this:
I have a Parent and Child component. In Child component I have inputs (name,email etc) and in Parent component I have Button to save the input data in database.
My question is: How to validate inputs(i want them to be required) so the button can NOT call saveData function(to save in database) if the inputs are empty.
Here is Parent Component:
class Parent extends Component{
saveData = (e) => {
//some code
}
render() {
return (
<div>
<Child/>
<Button color="primary" onClick={this.saveData}>Submit</Button>
</div>
);
}
}
And here is Child Component:
class Child extends React.Component {
onInputChange = (e) => {
e.preventDefault();
this.props.onInputChange(e.target.name, e.target.value);
};
render() {
return (
<FormGroup>
<Input name="email" onChange={this.onInputChange}/>
</FormGroup>
);
}
}
I cant see the implementation of your onInputChange function but looks like its coming from parent component.
So, if you have onInputChange in your parent component then, you can have a disable state that is passed to your Button component and you need to set that disable state when onInputChange is called i.e
onInputChange = (name, value) => {
if(value === ''){
this.setState({disable: true});
}
else{
this.setState({
name: value;
disable:false
})
}
}
And pass it to your button i.e.
<Child />
<Button color="primary" disabled={disable} onClick={this.saveData}>
I am working on a task to practice react programming, this is the task - Change Username
Here is the explanation:
This application should allow the user to update their username by inputting a custom value and clicking the button.
The Username component is finished and should not be changed, but the App component is missing parts. Finish the App component so that the Username component displays the inputted text when the button is clicked.
The App component should use the React.useRef Hook to pass the input to the Username component for the input element and for the Username component.
For example, if the user inputs a new username of "John Doe" and clicks the button, the div element with id root should look like this:
<div><button>Change Username</button><input type="text"><h1>John Doe</h1></div>
This is the code given:
class Username extends React.Component {
state = { value: "" };
changeValue(value) {
this.setState({ value });
}
render() {
const { value } = this.state;
return <h1>{value}</h1>;
}
}
function App() {
function clickHandler() {}
return (
<div>
<button onClick={clickHandler}>Change Username</button>
<input type="text" />
<Username />
</div>
);
}
document.body.innerHTML = "<div id='root'></div>";
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
I tried a lot to understand how to solve this, but I am not able to fix this, how to solve this problem?
Just found it out. Seems like you need to use refs for everything. No state or anything allowed! Please note that you should not do it like that in a real world app :)
function App() {
const ref = React.useRef()
const inputRef = React.useRef()
function clickHandler() {
ref.current.changeValue(inputRef.current.value)
}
return (
<div>
<button onClick={clickHandler}>Change Username</button>
<input type="text" ref={inputRef} />
<Username ref={ref} />
</div>
);
}
This works
import React from 'react'
import ReactDOM from 'react-dom'
class Username extends React.Component {
constructor(props){
super(props);
this.state = {value: ""};
}
changeValue(value) {
this.setState({value: value});
}
render() {
const value = this.state.value;
return <h1>{value}</h1>;
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.userNameRef = React.createRef();
}
clickHandler() {
var name = document.getElementById('name_input').value;
this.userNameRef.current.setState({value: name});
}
render() {
return (
<div>
<button onClick={this.clickHandler.bind(this)}>Change Username</button>
<input id="name_input" type="text" />
<Username ref={this.userNameRef} />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
Make sure you understand the code and don't be like me, forgetting the bind method :-)
In the real world you would probably do something like this: -
import React, { useRef } from "react";
import ReactDOM from "react-dom";
class Username extends React.Component {
state = { value: "" };
changeValue(value) {
this.setState({ value });
}
render() {
const { value } = this.state;
return <h1>{value}</h1>;
}
}
function App() {
const myRef = useRef();
function clickHandler() {
document.querySelector("h1").innerHTML = myRef.current.value;
}
return (
<div>
<button onClick={clickHandler}>Change Username</button>
<input type="text" ref={myRef} />
<Username />
</div>
);
}
document.body.innerHTML = "<div id='root'></div>";
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
document.querySelector("input").value = "John Doe";
document.querySelector("button").click();
setTimeout(() => console.log(document.getElementById("root").innerHTML));
This component structure probably isn't your best bet. Typically you want to have a Class component at the top with functional components on the bottom, and call those functional components within the Class component.
So rendering <button> within App is just making things hard for you. In App you should just be rendering <Username /> and have <Username /> holding your logic:
class Username extends Component {
constructor(props){
this.state = { usernameValue: ''};
this.onInputChange = this.onInputChange.bind(this);
this.changeUsername = this.changeUsername.bind(this);
}
onInputChange(event) {
this.setState({usernameValue: event.target.value});
}
changeUsername() {
//Update username in the DB
db.record = this.state.usernameValue
}
render(){
return (
<div>//Wrapper div
<input onChange={this.onInputChange} value={this.state.usernameValue} />
<button onClick={this.changeUsername}>Change Username</button>
</div>
);
}
}
function App(){
return(
<Username />
);
}
I did this a different way than what you were trying as you were trying to update the username by clicking the button, which you can do, but it would be better to update the state as you input the username, then use the button click as a form submission or something along those lines.
A good resource for this is here
Im making my first react project. Im new in JS, HTML, CSS and even web app programming.
What i want to do it is a Search input label. Now its look like this:
Like you can see i have some list of objects and text input.
I Have two components, my ProjectList.js with Search.js component...
class ProjectsList extends Component {
render() {
return (
<div>
<Search projects={this.props.projects} />
<ListGroup>
{this.props.projects.map(project => {
return <Project project={project} key={project.id} />;
})}
</ListGroup>
</div>
);
}
}
export default ProjectsList;
... and ProjectList.js displays Project.js:
How looks Search.js (its not ended component)
class Search extends Component {
state = {
query: ""
};
handleInputChange = () => {
this.setState({
query: this.search.value
});
};
render() {
return (
<form>
<input
ref={input => (this.search = input)}
onChange={this.handleInputChange}
/>
<p />
</form>
);
}
}
export default Search;
My project have name property. Could you tell me how to code Search.js component poperly, to change displaying projects dynamically based on input in text label? for example, return Project only, if text from input match (i want to search it dynamically, when i start typing m... it shows all projects started on m etc).
How to make that Search input properly? How to make it to be universal, for example to Search in another list of objects? And how to get input from Search back to Parent component?
For now, in react dev tools whatever i type there i get length: 0
Thanks for any advices!
EDIT:
If needed, my Project.js component:
class Project extends Component {
state = {
showDetails: false
};
constructor(props) {
super(props);
this.state = {
showDetails: false
};
}
toggleShowProjects = () => {
this.setState(prevState => ({
showDetails: !prevState.showDetails
}));
};
render() {
return (
<ButtonToolbar>
<ListGroupItem className="spread">
{this.props.project.name}
</ListGroupItem>
<Button onClick={this.toggleShowProjects} bsStyle="primary">
Details
</Button>
{this.state.showDetails && (
<ProjectDetails project={this.props.project} />
)}
</ButtonToolbar>
);
}
}
export default Project;
To create a "generic" search box, perhaps you could do something like the following:
class Search extends React.Component {
componentDidMount() {
const { projects, filterProject, onUpdateProjects } = this.props;
onUpdateProjects(projects);
}
handleInputChange = (event) => {
const query = event.currentTarget.value;
const { projects, filterProject, onUpdateProjects } = this.props;
const filteredProjects = projects.filter(project => !query || filterProject(query, project));
onUpdateProjects(filteredProjects);
};
render() {
return (
<form>
<input onChange={this.handleInputChange} />
</form>
);
}
}
This revised version of Search takes some additional props which allows it to be reused as required. In addition to the projects prop, you also pass filterProject and onUpdateProjects callbacks which are provided by calling code. The filterProject callback allows you to provide custom filtering logic for each <Search/> component rendered. The onUpdateProjects callback basically returns the "filtered list" of projects, suitable for rendering in the parent component (ie <ProjectList/>).
The only other significant change here is the addition of visibleProjects to the state of <ProjectList/> which tracks the visible (ie filtered) projects from the original list of projects passed to <ProjectList/>:
class Project extends React.Component {
render() {
return (
<div>{ this.props.project }</div>
);
}
}
class ProjectsList extends React.Component {
componentWillMount() {
this.setState({ visibleProjects : [] })
}
render() {
return (
<div>
<Search projects={this.props.projects} filterProject={ (query,project) => (project == query) } onUpdateProjects={ projects => this.setState({ visibleProjects : projects }) } />
<div>
{this.state.visibleProjects.map(project => {
return <Project project={project} key={project.id} />;
})}
</div>
</div>
);
}
}
class Search extends React.Component {
componentDidMount() {
const { projects, filterProject, onUpdateProjects } = this.props;
onUpdateProjects(projects);
}
handleInputChange = (event) => {
const query = event.currentTarget.value;
const { projects, filterProject, onUpdateProjects } = this.props;
const filteredProjects = projects.filter(project => !query || filterProject(query, project));
onUpdateProjects(filteredProjects);
};
render() {
return (
<form>
<input onChange={this.handleInputChange} />
</form>
);
}
}
ReactDOM.render(
<ProjectsList projects={[0,1,2,3]} />,
document.getElementById('react')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
<div id="react"></div>
I will assumes both your Search and ProjectList component have a common parent that contains the list of your projects.
If so, you should pass a function into your Search component props, your Search component will then call this function when the user typed something in the search bar. This will help your parent element decide what your ProjectsLists needs to render :
handleInputChange = () => {
this.props.userSearchInput(this.search.value);
this.setState({
query: this.search.value
});
};
And now, here is what the parent element needs to include :
searchChanged = searchString => {
const filteredProjects = this.state.projects.filter(project => project.name.includes(searchString))
this.setState({ filteredProjects })
}
With this function, you will filter out the projects that includes the string the user typed in their names, you will then only need to put this array in your state and pass it to your ProjectsList component props
You can find the documentation of the String includes function here
You can now add this function to the props of your Search component when creating it :
<Search userSearchInput={searchChanged}/>
And pass the filtered array into your ProjectsList props :
<ProjectsList projects={this.state.filteredProjects}/>
Side note : Try to avoid using refs, the onCHnage function will send an "event" object to your function, containing everything about what the user typed :
handleInputChange = event => {
const { value } = event.target
this.props.userSearchInput(value);
this.setState({
query: value
});
};
You can now remove the ref from your code
I have a React application structured like this: App.jsx with 2 components ParentComponentOne.jsx and ParentComponentTwo.jsx. ParentComponentOne.jsx has a component called ChildParentOne.jsx instantiated twice with different props. When clicking on a ChildParentOne.jsx I render the ParentComponentTwo which has inside 2 inputs with the values passed from ChildParentOne and a save button. When clicking on the save button i want to rerender the ChildParentOne component with the new values from the inputs.
App.jsx
class App extends Component {
state = {
show:{
pictureEdit: false
},
imgProp: null
};
childClicked = (props) => {
this.setState(
prevState => ({
show: {
pictureEdit: !prevState.show.pictureEdit,
},
imgProp: props
}))
}
render() {
return (
<div>
<ParentComponentOne childClicked={this.childClicked} />
{this.state.show.pictureEdit ? <ParentComponentTwo imgProp={this.state.imgProp} /> : null}
</div>
);
}
}
export default App;
ParentComponentOne.jsx
class ParentComponentOne extends Component {
imagePopUp = (props) => {
this.props.childClicked(props);
}
render() {
return (
<div>
<ChildParentOne onBtnClick={this.imagePopUp} imgW={340} imgH={83} />
<div>some content</div>
<ChildParentOne onBtnClick={this.imagePopUp} imgW={30} imgH={30} />
</div>
);
}
}
export default ParentComponentOne ;
ChildParentOne.jsx
class ChildParentOne extends Component {
clickFunction = (e) =>{
e.preventDefault();
e.stopPropagation();
this.props.onBtnClick(this.props);
}
render() {
return (
<div onClick={this.clickFunction}>
<img src='some_src' style={{width: this.props.imgW, height: this.props.imgH}}>
</div>
);
}
}
export default ChildParentOne ;
ParentComponentTwo.jsx
class ParentComponentTwo extends Component {
state = {
imgH: this.props.imgProp.imgH,
imgW: this.props.imgProp.imgW,
}
handleInputChange = (event) => {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({
[name]: value
});
}
handleSubmit = (e) => {
e.preventDefault();
//submit logic
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<input
name='imgH'
value={this.state.imgH}
onChange={this.handleInputChange}
type="number"
placeholder="Image Height"
style={{ width: '100%' }} />
<br />
<input
name='imgW'
value={this.state.imgW}
onChange={this.handleInputChange}
type="number"
placeholder="Image width"
style={{ width: '100%' }} />
<br />
<br />
<button type='submit' className="btn btn-success">Save</button>
</form>
</div>
);
}
}
export default ParentComponentTwo;
TLDR:
React Application
App.jsx - ParentComponentOne.jsx - ChildParentOne.jsx
- ParentComponentTwo.js
onClick ChildParentOne -(send the props)-> ParentComponentOne -(ChildParentOne Props)-> App -(ChildParentOne Props)-> ParentComponentTwo
ParentComponentTwo sets the values recieved on state which are binded to input values.
After I enter new values in the inputs how do i rerender the clicked ChildParentOne component with the new width and height.
When you change the state in your App component, it should trigger a re-rendering of your ChildParentOne automatically.
But since your are setting states, that references to the props, it doesn't get updated as you would think.
In order to get your code to work you need to implement the componentWillReceiveProps method to ParentComponentTwo
componentWillReceiveProps(nextProps) {
if(this.props.imgProp !== nextProps.imgProp) // Check if imgProp differs...
{
this.setState({
imgH: nextProps.imgProps.imgH,
imgW: nextProps.imgProps.imgW
})
}
}