We Keep Coding

Render component after change in another component

In my app I am adding new product. But after I click second time it appears on a list. In AddProducts I console.log the array with changed list and it had been updated. But in mu ProductList it doesnt work after click Add so I apply componentDidUpdate to react on changes. Also I use useEffect in App to react on changes sending from AddProduct but it works only I click second times.
AddProduct
function AddProducts(props) {
const [newProduct, setNewProduct] = useState({
productName: ``,
category: ``,
groceries: false,
});
const [newList, setNewList] = useState(props.productsToDisplay);
function handleChange(event) {
event.preventDefault();
setNewProduct({
...newProduct,
[event.target.name]:
event.target.type === "checkbox"
? event.target.checked
: event.target.value,
});
}
function handleAddNewProduct() {
const addProduct = newList.concat([
{
nazwa: newProduct.productName,
kategoria: newProduct.category,
produktSpozywczy: newProduct.groceries,
},
]);
setNewList(addProduct);
props.sendNewProductsToParent(newList);
}
return (
<div className={styles.Wrapper}>
{console.log(newList)}
<p>Add products</p>
<input
name="productName"
value={newProduct.productName}
onChange={handleChange}
></input>
<input
name="category"
value={newProduct.category}
onChange={handleChange}
></input>
<input
name="groceries"
type="checkbox"
value={newProduct.groceries}
onChange={handleChange}
></input>
<p>Is it groceries?</p>
<button onClick={handleAddNewProduct}>Add new product</button>
</div>
);
}
ProductList
class ProductsList extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className={commonColumnsStyles.App}>
{console.log(this.props.productsToDisplay)}
<header className={commonColumnsStyles.AppHeader}>
<p>Products list</p>
<ul>
{this.props.productsToDisplay.map((currProduct, index) => (
<li key={index} onClick={() => this.addProduct(index)}>
{currProduct.nazwa}
</li>
))}
</ul>
</header>
</div>
);
}
}
function App() {
const [resultToDisplay, setResultToDisplay] = useState(``);
const [newProductsList, setNewProductsList] = useState(produkty);
return (
<div className={styles.appWrapper}>
{console.log(newProductsList)}
<AddProducts
productsToDisplay={produkty}
sendNewProductsToParent={setNewProductsList}
/>
<div className={styles.columnsWrapper}>
<ProductsList
productsToDisplay={newProductsList}
sendAddedProductsToParent={setResultToDisplay}
/>
</div>
</div>
);
}

Solution for community:
AddProduct
function AddProducts(props) {
const [newProduct, setNewProduct] = useState({
productName: ``,
category: ``,
groceries: false,
});
function handleChange(event) {
event.preventDefault();
setNewProduct({
...newProduct,
[event.target.name]:
event.target.type === "checkbox"
? event.target.checked
: event.target.value,
});
}
function handleAddNewProduct() {
const addProduct = {
nazwa: newProduct.productName,
kategoria: newProduct.category,
produktSpozywczy: newProduct.groceries,
};
props.sendNewProductToParent((listOfPrimiaryProducts) => [
...listOfPrimiaryProducts,
addProduct,
]);
}
return (
<div className={styles.Wrapper}>
<p>Add products</p>
<input
name="productName"
value={newProduct.productName}
onChange={handleChange}
></input>
<input
name="category"
value={newProduct.category}
onChange={handleChange}
></input>
<input
name="groceries"
type="checkbox"
value={newProduct.groceries}
onChange={handleChange}
></input>
<p>Is it groceries?</p>
<button onClick={handleAddNewProduct}>Add new product</button>
</div>
);
}
export default AddProducts;
ProductList
class ProductsList extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className={commonColumnsStyles.App}>
<header className={commonColumnsStyles.AppHeader}>
<p>Products list</p>
<ul>
{this.props.productsInShop.map((currProduct, index) => (
<li key={index} onClick={() => this.addProduct(index)}>
{currProduct.nazwa}
</li>
))}
</ul>
</header>
</div>
);
}
}
export default ProductsList;
App
function App() {
const [productsList, setProductsList] = useState(produkty);
return (
<div className={styles.appWrapper}>
<AddProducts sendNewProductToParent={setProductsList} />
<div className={styles.columnsWrapper}>
<ProductsList
productsInShop={productsList}
/>
</div>
</div>
);
}
export default App;

Style List Div to have different colors based on dropdown selection

I have a form on a page that includes a dropdown, I want the background color for each div to be different depending on the dropdown selection. For instance, if the user selects Seedy Fruit, I want the list div to be green, and Non Seedy Fruit to be Red.
How can I implement this?
FruitListRender.Jsx
import React, { useState } from "react";
import FruitForm from "./FruitForm";
import FruitList from "./FruitList";
const FruitListRender = () => {
const [newFruit, setNewFruit] = useState("");
const [fruits, setFruitList] = useState([]);
const [fruitType, setFruitType] = useState([]);
return (
<div>
<div>
<FruitForm
newFruit={newFruit}
setNewFruit={setNewFruit}
fruits={fruits}
setFruitList={setFruitList}
/>
</div>
<div>
<FruitList fruits={fruits} setFruitList={setFruitList} />
</div>
</div>
);
};
export default FruitListRender;
FruitListForm
import React from "react";
import { v4 as uuidv4 } from "uuid";
const FruitListForm = ({
newFruit,
setNewFruit,
fruits,
setFruitsList,
}) => {
const addFruits = (event) => {
event.preventDefault();
setFruitList([...fruits, { id: uuidv4(), name: newFruit, type: fruitType }]);
setNewFruits("");
};
return (
<form className="fruitform" onSubmit={addFruits}>
<div>
<input
value={newFruit}
type="text"
placeholder="Name of Fruit"
onChange={(e) => setNewFruit(e.target.value)}
/>
</div>
<div className="fruitform__addfruit">
<select
value={fruitType}
placeholder="Fruit Type"
className="fruitform__dropdown"
onChange={(e) => setFruitType(e.target.value)}
>
<option value="" disabled selected>
Fruit Type
</option>
<option value="Seedy Fruit">Seedy Fruit</option> {" "}
<option value="Non Seedy Fruit">Non Seedy Fruit</option>
</select>
</div>
<div>
<button>Submit</button>
</div>
</form>
);
};
export default FruitListForm;
FruitList.jsx
import React from "react";
const FruitList = ({ fruits = [], setFruitList }) => {
return (
<div>
{fruits.map((fruit) => (
<ul key={fruit.id}>
<li className="fruit-list">
<p>{fruit.name}</p>
<p>{fruit.type}</p>
</li>
</ul>
))}
</div>
);
};
export default FruitList;

Assuming you map the selection to a fruitOption variable, probably by using a hook, then
const optionToClass = {"seedy fruit":"seedy", "non seedy fruit":"non-seedy"}
<li className={"fruit-list "+(optionToClass[fruitOption])}>
and in your CSS file,
.seedy {
background-color: green
}
...
Or you could just do it inline, if you prefer.

React js communication between two components

I am new to ReactJS and building one simple application using few components like UserForm, UserGrid and App.
UserForm displays simple textbox and button like below.
and when user input some text inside textbox and hit the save button it will display data in UserGrid component as per the screenshot.
but i can't figure it out how edit will work ? like when i hit the edit it will fetch the information from the grid and fill the textbox so i can update the data, can someone please help me on this ? how can i achieve this ?
below is my code
UserForm.js
import React,{createRef} from 'react';
const UserForm = (props) =>{
const username = createRef();
const saveUser = () =>{
debugger
if(username.current.value !== ''){
props.handleSubmit(username.current.value);
username.current.value='';
username.current.focus();
}
}
return(
<div className="row">
<div className="col-md-6">
<div className="form-group">
<input type="text" className="form-control" placeholder="Username" ref={username} />
</div>
</div>
<div className="col-md-12">
<button className="btn btn-primary" onClick={saveUser}>Save</button>
</div>
</div>
)
}
export default UserForm;
UserGrid.js
import React from 'react';
const UserGrid = (props) =>{
debugger
return(
<div className="row">
<div className="col-md-12">
<table className="table">
<tr>
<th>
Username
</th>
<th>
</th>
</tr>
{
props.list.map(item =>
<tr>
<td>
{item}
</td>
<td>
<button>Edit</button>
<button>Delete</button>
</td>
</tr>
)
}
</table>
</div>
</div>
)
}
export default UserGrid;
App.js
import React,{useState} from 'react';
import UserForm from './UserForm';
import UserGrid from './UserGrid';
function App() {
const [list, setList] = useState([]);
const handleSubmit = (username) =>{
setList([...list,username]);
}
return (
<div className="App">
<UserForm handleSubmit={handleSubmit}></UserForm>
<UserGrid list={list}></UserGrid>
</div>
);
}
export default App;

You have to bring your edit state up to App component rather than using ref in the child component. Just like you have handleSubmit in App.js have a handleEdit function and pass that function to UserGrid.
function App() {
const [list, setList] = useState([]);
const [name, setName] = useState('');
const [editIndex, setEditIndex] = useState(null);
const handleSubmit = () => {
if(editIndex) {
setList([...list.slice(0, index), name, ...list.slice(index+1)])
setEditIndex(null)
} else {
setList([...list, name]);
}
setName('')
}
return (
<div className="App">
<UserForm name={name} setName={setName} handleSubmit={handleSubmit}></UserForm>
<UserGrid setEditIndex={setEditIndex} list={list}></UserGrid>
</div>
);
}
UserForm.js
import React,{createRef} from 'react';
const UserForm = ({name, setName}) =>{
const saveUser = () =>{
debugger
if(name !== ''){
props.handleSubmit();
}
}
return(
<div className="row">
<div className="col-md-6">
<div className="form-group">
<input type="text" className="form-control" placeholder="Username" value={name} onChange={(e) => setName(e.target.value)} />
</div>
</div>
<div className="col-md-12">
<button className="btn btn-primary" onClick={saveUser}>Save</button>
</div>
</div>
)
}
export default UserForm;
To support edit:
{
props.list.map((item, index) =>
<tr>
<td>
{item}
</td>
<td>
<button onClick={setEditIndex(index)}>Edit</button>
<button>Delete</button>
</td>
</tr>
)
}

This is working example while i am using your code.
Nothing special in App.js. You can take a look a logic.
App.js
import React, { useState } from "react";
import UserForm from "./UserForm";
import UserGrid from "./UserGrid";
function App() {
const [list, setList] = useState([]);
const handleSubmit = username => {
setList([...list, username]);
};
const editList = item => {
setList(
list.map(l => ({
...l,
username: l.id === item.id && item.newValue ? item.newValue : l.username
}))
);
};
const deleteList = id => {
setList(list.filter(l => l.id !== id));
};
return (
<div className="App">
<UserForm handleSubmit={handleSubmit}></UserForm>
<UserGrid
list={list}
editList={editList}
deleteList={deleteList}
></UserGrid>
</div>
);
}
export default App;
This is UserForm Component. I think you will have problems, if you dont have someting like ID, cuz if you have lists with same names, your delete and edit function will work wrong.
UseForm.js
import React, { createRef } from "react";
const UserForm = ({ handleSubmit }) => {
const username = createRef();
const saveUser = () => {
if (username.current.value !== "") {
const randomId = () => "_" + Math.random().toString(36).substr(2, 9);
handleSubmit({ username: username.current.value, id: randomId() });
username.current.value = "";
username.current.focus();
}
};
return (
<div className="row">
<div className="col-md-6">
<div className="form-group">
<input
type="text"
className="form-control"
placeholder="Username"
ref={username}
/>
</div>
</div>
<div className="col-md-12">
<button className="btn btn-primary" onClick={saveUser}>
Save
</button>
</div>
</div>
);
};
export default UserForm;
And this is UserGrid component. I hope you will undarstand the code. If you have questions, go ahead.
UseGrid.js
import React, { useState } from "react";
const UserGrid = ({ list, editList, deleteList }) => {
const [isEditable, setIsEditable] = useState(false);
const [value, setValue] = useState("");
return (
<div className="row">
<div className="col-md-12">
<table className="table">
<tr>
<th>Username</th>
<th></th>
</tr>
{list.map(item => (
<tr>
<td>{item.username}</td>
{isEditable ? (
<>
<td>
<input
type="text"
className="form-control"
placeholder="Username"
onChange={e => setValue(e.target.value)}
/>
</td>
<button onClick={() => setIsEditable(false)}>CANCEL</button>
</>
) : null}
<td>
<button
onClick={() => {
editList({
id: item.id,
username: item.username,
newValue: value
});
setIsEditable(true);
}}
>
Edit
</button>
<button onClick={() => deleteList(item.id)}>Delete</button>
</td>
</tr>
))}
</table>
</div>
</div>
);
};
export default UserGrid;

Redux form defaultValue

How to set defaultValue to input component?
<Field name={`${prize}.rank`} defaultValue={index} component={Input} type='text'/>
I tried like above but my fields are empty. I'm trying to create fieldArray (dynamic forms):
{fields.map((prize, index) =>
<div key={index} className="fieldArray-container relative border-bottom" style={{paddingTop: 35}}>
<small className="fieldArray-title marginBottom20">Prize {index + 1}
<button
type="button"
title="Remove prize"
className="btn btn-link absolute-link right"
onClick={() => fields.remove(index)}>Delete</button>
</small>
<div className="row">
<div className="col-xs-12 col-sm-6">
<Field name={`${prize}.rank`} defaultValue={index} component={Input} type='text'/>
<Field name={`${prize}.prizeId`} defaultValue={index} component={Input} type='text'/>
<Field
name={`${prize}.name`}
type="text"
component={Input}
label='Prize Name'/>
</div>
<div className="col-xs-12 col-sm-6">
<Field
name={`${prize}.url`}
type="text"
component={Input}
label="Prize URL"/>
</div>
<div className="col-xs-12">
<Field
name={`${prize}.description`}
type="text"
component={Input}
label="Prize Description" />
</div>
</div>
</div>
)}

On redux forms you can call initialize() with an object of values like so:
class MyForm extends Component {
componentWillMount () {
this.props.initialize({ name: 'your name' });
}
//if your data can be updated
componentWillReceiveProps (nextProps) {
if (/* nextProps changed in a way to reset default values */) {
this.props.destroy();
this.props.initialize({…});
}
}
render () {
return (
<form>
<Field name="name" component="…" />
</form>
);
}
}
export default reduxForm({})(MyForm);
This way you can update the default values over and over again, but if you just need to do it at the first time you can:
export default reduxForm({values: {…}})(MyForm);

This jsfiddle has an example
https://jsfiddle.net/bmv437/75rh036o/
const renderMembers = ({ fields }) => (
<div>
<h2>
Members
</h2>
<button onClick={() => fields.push({})}>
add
</button>
<br />
{fields.map((field, idx) => (
<div className="member" key={idx}>
First Name
<Field name={`${field}.firstName`} component="input" type="text" />
<br />
Last Name
<Field name={`${field}.lastName`} component="input" type="text" />
<br />
<button onClick={() => fields.remove(idx)}>
remove
</button>
<br />
</div>
))}
</div>
);
const Form = () => (
<FieldArray name="members" component={renderMembers} />
);
const MyForm = reduxForm({
form: "foo",
initialValues: {
members: [{
firstName: "myFirstName"
}]
}
})(Form);

this is my implementation using a HoC
import { Component } from 'react'
import {
change,
} from 'redux-form'
class ReduxFormInputContainer extends Component{
componentDidMount(){
const {
initialValue,
meta,
} = this.props
if(initialValue === undefined || meta.initial !== undefined || meta.dirty) return
const {
meta: { form, dispatch },
input: { name },
} = this.props
dispatch(change(form, name, initialValue))
}
render(){
const {
initialValue,
component: Compo,
...fieldProps
} = this.props
return <Compo {...fieldProps} />
}
}
function reduxFormInputContainer(component){
return function(props){
return <ReduxFormInputContainer {...props} component={component} />
}
}
export default reduxFormInputContainer
and then for exemple:
import reduxFormInputContainer from 'app/lib/reduxFormInputContainer'
InputNumericWidget = reduxFormInputContainer(InputNumericWidget)
class InputNumeric extends Component{
render(){
const props = this.props
return (
<Field component={InputNumericWidget} {...props} />
)
}
}

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