We Keep Coding

I am learning React and it seems I cannot define a function component while inside a class component, is this true or am I doing something wrong?

As the title says, trying to declare a component within my class, however, getting an Undefined error. Can I not do this or am I doing it wrong? As I said, I'm new to React so any bit of info helps. The overall goal is to create a form but I'm trying to only make certain options pop depending on what the previous options are. If the code is too much let me know, I'll trim it down to what's import but I figured I'd provide the whole thing cause it's not that long.
import React, {useState, useMemo} from 'react';
import ReactDOM from 'react-dom/client';
import countryList from 'react-select-country-list';
import './index.css';
//import App from './App';
class StartForm extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.options = countryList().getData();
}
handleChange(event) {
this.setState({[event.target.name]: event.target.value});
//alert('Your favorite flavor is: ' + this.state.value);
console.log(this.state.accType);
}
handleSubmit(event) {
//alert('Your favorite flavor is: ' + this.state.value);
//event.preventDefault();
}
//------------------- THIS COMPONENT
CustomOptions(props) {
return(
<label>
<input type="checkbox" id="acss_debit_payments" name="acss_debit_payments" value={this.value.acss_debit_payments} onChange={this.handleChange} />Paneer
</label>
);
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Select Account Type:
<select name="accType" value={this.state.accType} onChange={this.handleChange}>
<option value="custom">Custom</option>
<option value="express">Express</option>
<option value="standard">Standard</option>
</select>
</label>
<br/>
<label>
Select Country Code(Optional):
<select name="country" options={this.options} value={this.state.country} onChange={this.handleChange}/>
</label>
<br/>
<label>
Email:
<input type="text" name="email" value={this.state.email} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
{this.state.accType == "custom" &&
<CustomOptions />
}
</form>
);
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<StartForm/>
</React.StrictMode>
);

To call CustomOptions you need to reference the current instance with this:
<this.CustomOptions />
Example: https://codesandbox.io/s/happy-swartz-hsm6ng?file=%2Fsrc%2FApp.js

How to create a dynamic input type component

I'm developing a dynamic component where the input can be used for several types: text, password, number, date, etc. The idea is to use this input, no matter the type and where to implement it, as long its adaptable. I thought using state was a nice idea, but I have no clue how to do this. Any thoughts?
import React, { Component } from 'react';
import './styles.css';
export default class InputField extends Component {
constructor(props) {
super(props);
this.state = {
name: '',
password: false,
type: ''
}
}
render () {
return (
<div>
<label className='f-size'>{this.state.name}</label>
<input
className='input'
name={this.state.name}
placeholder={this.state.name}
value={this.props.value}
type={this.state.type}
onChange={this.props.onChange}
/>
<span className="errorMessage">{this.props.error}</span>
<span className="errorMessage">{this.props.missField}</span>
</div>
)
}
}
Thank you!

I personally think you should control this via props, seeing as the value will only be meaningful to the Input's parent.
I used this
const InputField = ({
name,
placeholder,
value,
type,
onChange,
error,
missField
}) => (
<div>
<label className="f-size">{name}</label>
<input
className="input"
name={name}
placeholder={placeholder}
value={value}
type={type}
onChange={onChange}
/>
<span className="errorMessage">{error}</span>
<span className="errorMessage">{missField}</span>
</div>
);
Parent component:
class App extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
state = {
value: '',
password: '',
};
handleChange(event) {
this.setState({ [event.target.name]: event.target.value });
}
render() {
return (
<div className="App">
<InputField
value={this.state.value}
type="number"
name="value"
onChange={this.handleChange}
/>
<InputField
value={this.state.password}
type="password"
name="password"
onChange={this.handleChange}
/>
</div>
);
}
}
Code Sandbox: https://codesandbox.io/s/y4ljv75k9
Edited to used a stateless component. Not sure if you want state to handle error messages but from your example, this is a valid solution.

<InputField type="text" />
<InputField type="password" />
<input
className='input'
name={this.state.name}
placeholder={this.state.name}
value={this.props.value}
type={this.props.type}
onChange={this.props.onChange}
/>
I would use props to change the type and manage the component.
You could then control the component from a form definition

You should use props not state, so you can pass
<InputType type="text" />
<InputType type="password" />
<InputType type="number" />
and for the other params you can use props also.

You could use this.props.type but the standard jsx input component is already dynamic as you can see from my example below :
var root = document.getElementById('root');
class InputField extends React.Component {
render() {
return (
<div>
<input type={this.props.type} />
</div>
)
}
}
class App extends React.Component {
render() {
return (
<div>
<input type='date' />
<InputField type='password'/>
</div>
)
}
}
ReactDOM.render(<App />, root)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root'></div>
Is there a reason why you would like to use a custom input component?

React JS - How to rerender Independed component?

I am new to this React JS, please in this question. I Have 4 components(Insert,delete,update and show). when i insert data in Insert component then immediately it should show those details in Show components. Please find my sample code. Thanks in advance for your help.
main.js :
import React from 'react';
import ReactDOM from 'react-dom';
import Insert from './Insert.js';
import Show from './Show.js';
import Delete from './Delete.js';
import Update from './update.js';
ReactDOM.render(<Insert/>, document.getElementById('Insert'))
ReactDOM.render(<Show />, document.getElementById('Show'))
ReactDOM.render(<Delete />, document.getElementById('Delete'))
ReactDOM.render(<Update/>, document.getElementById('Update'))
My Index.html :
<table border="2" align="center">
<tr>
<td>
<h1> Insert New Record </h1>
<div id = "Insert"></div>
</td>
<td>
<h1> Show Existing Records </h1>
<div id = "Show"> </div>
</td>
</tr>
<tr>
<td>
<h1> Delete Emp Record </h1>
<div id="Delete"> </div>
</td>
<td>
<h1> Update Existing Records </h1>
<div id="update" > </div>
</td>
</tr>
<script src = "index.js"></script>
Now i need to refresh the Show component whenever i perform insert, update, delete operations.
My sample Insert Component :
import React from 'react';
import Fetch from 'react-fetch';
import Show from './show'
class Insert extends React.Component {
constructor(props) {
super(props);
this.state = {
Id:0 ,
name:'' ,
mobile: '',
email: '',
dept : '',
role :'',
child : Show
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
const Id= target.Id;
const name = target.name;
const mobile = target.mobile;
const email = target.email;
const dept = target.dept;
const role = target.role;
this.setState({[Id]: event.target.value});
this.setState({[name]: event.target.value});
this.setState({[mobile]: event.target.value});
this.setState({[email]: event.target.value});
this.setState({[dept]: event.target.value});
this.setState({[role]: event.target.value});
}
handleSubmit(event) {
let employee={
Id:this.state.Id,
name:this.state.name,
mobile:this.state.mobile,
email:this.state.email,
dept:this.state.dept,
role:this.state.role
}
fetch('http://localhost:25424/api/Employee/CreateNewEmployee/', {
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Access-Control-Allow-Origin' : 'http://localhost:7777' ,
'Access-Control-Allow-Headers' : 'Origin, X-Requested-With, Content-Type, Accept',
'Access-Control-Allow-Methods' : 'POST'
},
body: JSON.stringify(employee)
})
.then(function(resp){
})
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label >ID</label>
<input type="number" name="Id" value={this.state.Id} onChange={this.handleInputChange} />
<br/>
<label >name</label>
<input type="text" name="name" value={this.state.name} onChange={this.handleInputChange} />
<br/>
<label >Mobile</label>
<input type="text" name="mobile" value={this.state.mobile} onChange={this.handleInputChange} />
<br/>
<label >Email</label>
<input type="text" name="email" value={this.state.email} onChange={this.handleInputChange} />
<br/>
<label >Dept</label>
<input type="text" name="dept" value={this.state.dept} onChange={this.handleInputChange} />
<br/>
<label >Role</label>
<input type="text" name="role" value={this.state.role} onChange={this.handleInputChange} />
<br/>
<input type="submit" value="Submit" />
</form>
);
}
}
export default Insert;

This is the file structure you need to aim for in a React app
- src/
- components/
- insert.js
- delete.js
- update.js
- show.js
- main.js
- index.html
for example:
main.js // should contain all the data(state) and should flow downwards to your child components
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import 'insert' from /route/to/insert.js
import 'delete' from /route/to/delete.js
import 'show' from /route/to/show.js
import 'update' from /route/to/update.js
class Main extends Component {
constructor(props) {
super(props);
this.state = {//initialize state object}
}
render() {
return ( //jsx
<table border="2" align="center">
<tr>
<(insert.js component)/>
<(delete.js component)/>
</tr>
<tr>
<(update.js component)/>
<(show.js component)/>
</tr>
)
}
}
ReactDOM.reder(<Main/>, document.querySelector('one DOM element'))
and then... make each separate components to render out JSX into the main.js
Hope that makes sense :/

You dont have a parent child relationship in between you components. You will need all of this in one parent React component, lets say Main.jsx.
and it should look something like this:
Main.jsx:
import React from 'react';
class Main extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {
flag: 0,
}
handleSubmit(){
this.setState({flag : this.state.flag});
}
render() {
return(<div>
<Insert handleSubmit = {this.handleSubmit}/>
<Show/>
<Delete/>
<Update />
</div>);
}
}
export default Main
You can put the structure of DOM or layout as per your desire in render. In handleSubmit function m reassigning the same state again so that it can re render. You can also use this.forceUpdate() for this but it is not advisable in some cases.
Your handleSubmit function in Insert Component would look need to call the props function as this.props.handleSubmit() so that it can re render the main component which in turn will re render your show update and delete.
Hope it helps.

Getting data from child select box in parent using ReactJS

I have a child component with a select form element, this queries my API and makes a select box out of the data. I then try to pass the option back that's been selected via an OnChange function to my parent component so I can then send my data back to the server. I keep getting an error saying state is not defined, I am new to react and can't see where I am going wrong.
Here is my parent component
var ReactDom = require('react-dom');
const uuid = require('uuid/v1');
import {postDataTest} from "../actions/postData";
import TeamSelectBox from "./TeamSelectBox";
import React, {Component, PropTypes} from "react";
class PlayerForm extends Component {
constructor(props) {
super(props);
this.state = {
teamId: ''
};
this.handleChange = this.handleChange.bind(this);
}
fieldValues = {
name: null,
teamName: null,
bio: null
}
handleChange(dataFromChild) {
console.log(dataFromChild);
}
nextStep(e) {
e.preventDefault();
// Get values via this.refs
var player = {
id: uuid(),
name: ReactDom.findDOMNode(this.refs.name).value,
teamName: ReactDom.findDOMNode(this.refs.teamName).value,
bio: ReactDom.findDOMNode(this.refs.bio).value,
teamId: ReactDom.findDOMNode(this.refs.teamId).value
};
postDataTest(player);
}
render() {
return (
<div className="row">
<div className="col-md-6">
<div className="panel">
<div className="panel-heading">
<h1>Add Player</h1>
</div>
<div className="panel-body">
<form className="form-horizontal">
<div className="form-group">
<label className="control-label">Name</label>
<input type="text" className="form-control" ref="name" defaultValue={this.fieldValues.name}/>
</div>
<div className="form-group">
<label className="control-label">Team Name</label>
<input type="text" className="form-control" ref="teamName" defaultValue={this.fieldValues.teamName}/>
</div>
<TeamSelectBox state={this.state.teamId} onChange={this.handleChange}/>
<div className="form-group">
<label className="control-label">Bio</label>
<input type="textarea" className="form-control" ref="bio" defaultValue={this.fieldValues.bio}/>
</div>
<div className="bs-component">
<button className="btn btn-md btn-default btn-block" onClick={this.nextStep}>Save & Continue</button>
</div>
</form>
</div>
</div>
</div>
</div>
)
}
}
module.exports = PlayerForm;
And here is my child form select box
import React, {Component} from "react";
import axios from "axios";
import {postDataTest} from '../actions/postData';
class TeamSelectBox extends Component {
constructor(props) {
super(props);
this.state = {
teams: []
};
}
componentDidMount() {
axios.get("/api/teams")
.then(response => {
const teams = response.data;
this.setState({teams});
console.log(teams);
});
}
render() {
return (
<div className="form-group">
<label for="inputSelect" className="control-label">Select Team</label>
<div className="bs-component">
<select value={this.probs.state.teamId} onChange={this.probs.onChange} className="form-control">
<option value=""></option>
{this.state.teams.map(singleTeam =>
<option value={singleTeam.id}>{singleTeam.team.name}</option>
)}
</select>
</div>
</div>
);
}
}
export default TeamSelectBox;

Your approach seems OK, but you had a typo in your child Component:
{this.probs.onChange}
change it to {this.props.onChange} and try again!

i think you have a typo, you missed spell props, this.props not this.probs

How do I render React components dynamically using props?

I am learning React and don't quite understand how to dynamically render components based on props.
For practice, I'm building a credit card validator which works well. Once the information is valid, I want to render my component to display a thank you message. I've added a property "mode" that contains "default". My thinking is that this prop would then change to "thankYouScreen" when the credit card info is validated. When this prop changes to "thankYouScreen" it would render the ThankYouMessage component.
Is this how one would go about this?
Components
import React from 'react';
import PaymentStore from './../store/paymentStore';
class InitialPaymentScreen extends React.Component {
constructor(props) {
super(props)
}
render() {
console.log(this.props);
return (
<div className="pay-form">
<div className="pay-form-wrapper">
<div className="pay-form-title">Payment Information</div>
<form className="payment-form js-error-hook" onSubmit={this.props.store.init.bind(this.props.store)}>
<div className="payment-form-wrap payment-form-cc-name">
<label className="payment-form-label">Name on Card</label>
<input className="payment-form-input js-cc-name" maxLength="50" placeholder="Enter your name..." type="text"/>
</div>
<div className="payment-form-wrap payment-form-cc">
<label className="payment-form-label">Card Number</label>
<input className="payment-form-input js-cc-number" placeholder="1234 5678 9012 3456" type="number"/>
</div>
<div className="payment-form-wrap payment-form-exp">
<label className="payment-form-label">Expiration</label>
<input className="payment-form-input js-cc-expiration" placeholder="04/17" type="number" min="0"/>
</div>
<div className="payment-form-wrap payment-form-cvv">
<label className="payment-form-label">CVV</label>
<input className="payment-form-input js-cc-cvv" placeholder="123" type="number"/>
</div>
<input type="submit" className="payment-form-submit" onClick={this.props.store.init.bind(this.props.store)} value="Next" />
</form>
</div>
</div>
);
}
}
class ThankYouMessage extends React.Component {
constructor(props) {
super(props)
}
render() {
return(
<div>Thanks!</div>
);
}
}
class PaymentForm extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<section className="main-content payment-form-wrapper">
<InitialPaymentScreen store={this.props.route.store} mode="default"/>
</section>
);
}
}
Store
let PaymentStore = {
validateFields() {
// Validates all the information
},
displayThankYou(){
console.log("Thanks!")
// I'm assuming this is where I should update "mode" to render the component
},
};