Develop Reference

In React, what is causing: Encountered two children with the same key, `Color-[object Object]` error when I refresh the page

my application works fine until i refresh or re-render the page. There is multiple possible explanations for this, but I cant seem to work it out. The first problem might be in the constructor, as I am not sure if I'm allowed to do it this way. However I need to use the match.params to get the right product to use on the page.
The error:
index.js:1 Warning: Encountered two children with the same key, `Size-[object Object]`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
at select
at VariantSelector (http://localhost:3000/static/js/main.chunk.js:7811:1)
at div
at ProductPage (http://localhost:3000/static/js/main.chunk.js:6069:5)
at C (http://localhost:3000/static/js/0.chunk.js:77932:37)
at ConnectFunction (http://localhost:3000/static/js/0.chunk.js:74833:75)
at Route (http://localhost:3000/static/js/0.chunk.js:77675:29)
at Switch (http://localhost:3000/static/js/0.chunk.js:77877:29)
at div
at CollectionPage (http://localhost:3000/static/js/main.chunk.js:9200:3)
at ConnectFunction (http://localhost:3000/static/js/0.chunk.js:74833:75)
at Spinner (http://localhost:3000/static/js/main.chunk.js:7939:5)
at Route (http://localhost:3000/static/js/0.chunk.js:77675:29)
at Switch (http://localhost:3000/static/js/0.chunk.js:77877:29)
at div
at ShopPage (http://localhost:3000/static/js/main.chunk.js:10106:1)
at ConnectFunction (http://localhost:3000/static/js/0.chunk.js:74833:75)
at Route (http://localhost:3000/static/js/0.chunk.js:77675:29)
at Switch (http://localhost:3000/static/js/0.chunk.js:77877:29)
at div
at App (http://localhost:3000/static/js/main.chunk.js:803:5)
at ConnectFunction (http://localhost:3000/static/js/0.chunk.js:74833:75)
at Elements (http://localhost:3000/static/js/0.chunk.js:38972:30)
at PersistGate (http://localhost:3000/static/js/0.chunk.js:83105:5)
at Router (http://localhost:3000/static/js/0.chunk.js:77310:30)
at BrowserRouter (http://localhost:3000/static/js/0.chunk.js:76930:35)
at Provider (http://localhost:3000/static/js/0.chunk.js:74546:20)
And on the front-end:
Before refresh:
After refresh:
The error when I try to select an option after the refresh:
The code of the product page:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { createStructuredSelector } from 'reselect';
import CustomButton from '../custom-button/custom-button.component';
import './product-detail.styles.scss';
import {addCollectionId} from '../../redux/cart/cart.utils';
import VariantSelector from '../variant-selector/VariantSelector';
import { selectCheckout, selectCart } from '../../redux/cart/cart.selectors';
import { client } from '../../shopify/shopify.utils';
// constants
const ONE_SIZE_FITS_MOST = "One Size Fits Most";
class ProductPage extends Component {
constructor(props) {
super(props);
const { match, collection} = this.props;
const { productId } = match.params;
const product = collection.products.find((product) => (product.title.toLowerCase() === productId.toLowerCase()));
let defaultOptionValues = {};
product.options.forEach((selector) => {
defaultOptionValues[selector.name] = selector.values[0].value;
});
this.state = {
selectedOptions: defaultOptionValues,
product: product,
};
this.handleOptionChange = this.handleOptionChange.bind(this);
this.handleQuantityChange = this.handleQuantityChange.bind(this);
this.findImage = this.findImage.bind(this);
}
findImage(images, variantId) {
const primary = images[0];
const image = images.filter(function (image) {
return image.variant_ids.includes(variantId);
})[0];
return (image || primary).src;
}
handleOptionChange(event) {
const target = event.target
let selectedOptions = this.state.selectedOptions;
selectedOptions[target.name] = target.value;
//console.log('selectedVariant', selectedOptions);
const selectedVariant = client.product.helpers.variantForOptions(this.state.product, selectedOptions)
//console.log(selectedVariant);
this.setState({
selectedVariant: selectedVariant,
selectedVariantImage: selectedVariant.attrs.image
});
console.log(this.state)
}
handleQuantityChange(event) {
this.setState({
selectedVariantQuantity: event.target.value
});
}
addVariantToCart(variantId, quantity) {
const lineItemsToAdd = [{variantId, quantity: parseInt(quantity, 10)}]
const checkoutId = this.props.checkout.id
client.checkout.addLineItems(checkoutId, lineItemsToAdd).then(res => {
this.props.dispatch({type: 'ADD_VARIANT_TO_CART', payload: {isCartOpen: true, checkout: res}});
});
}
render() {
let aOptionNames = [];
let variantImage = this.state.selectedVariantImage || this.state.product.images[0]
let variant = this.state.selectedVariant || this.state.product.variants[0]
let variantQuantity = this.state.selectedVariantQuantity || 1
let variantSelectors = this.state.product.options.map((option) => {
aOptionNames.push(option.name);
return (
<VariantSelector
handleOptionChange={this.handleOptionChange}
key={option.id.toString()}
option={option}
/>
);
});
let bShowOneSizeFitsMost = (variantSelectors.length === 1 && aOptionNames[0] === "Title");
return (
<div className="Product">
{this.state.product.images.length ? <img src={variantImage.src} alt={`${this.state.product.title} product shot`}/> : null}
<h5 className="Product__title">{this.state.product.title}</h5>
<p>€{variant.price}</p>
{bShowOneSizeFitsMost ? <h5 className="Product__title">{ONE_SIZE_FITS_MOST}</h5> : variantSelectors}
<label className="Product__option">
Quantity: <input className="form-control" min="1" type="number" defaultValue={variantQuantity} onChange={this.handleQuantityChange}></input>
</label>
<button className="Product__buy button" onClick={() => this.addVariantToCart(variant.id, variantQuantity)}>Add to Cart</button>
</div>
);
}
}
const mapStateToProps = createStructuredSelector({
checkout: selectCheckout
});
export default connect(
mapStateToProps,
)(withRouter(ProductPage));
The code of the variantselector:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
import React, {Component} from 'react';
class VariantSelector extends Component {
render() {
return (
<select
className="Product__option"
name={this.props.option.name}
key={this.props.option.name}
onChange={this.props.handleOptionChange}
>
{this.props.option.values.map((value) => {
return (
<option value={value} key={`${this.props.option.name}-${value}`}>{`${value}`}</option>
)
})}
</select>
);
}
}
export default VariantSelector;
If I change the content (in the variant selector) of the option from
<option value={value} key={${this.props.option.name}-${value}}>{${value}}</option>
to
<option value={value} key={${this.props.option.name}-${value}}>{${value.value}}</option>,
it solves the issue (visually) in the option selector, but it still errors out when I try to select an other option. So I am thinking it has something to do with passing entire objects here. However, I can't find a way to make it work. Is the problem in the constructor function of the product page or in the combination of the VariantSelector and the handleOptionChange function?
If anyone has seen a similar problem, or knows what is causing it, I would love to hear. Thank you in advance!

How to use forEach in react js

I want to create a function which iterate over all element with same class and remove a specific class.
It could be done easily using JavaScript.
const boxes = document.querySelectorAll(".box1");
function remove_all_active_list() {
boxes.forEach((element) => element.classList.remove('active'));
}
But how can I do this similar thing is ReactJs. The problem which I am facing is that I can't use document.querySelectorAll(".box1") in React but, I can use React.createRef() but it is not giving me all elements, it's only giving me the last element.
This is my React Code
App.js
import React, { Component } from 'react';
import List from './List';
export class App extends Component {
componentDidMount() {
window.addEventListener('keydown', this.keypressed);
}
keypressed = (e) => {
if (e.keyCode == '38' || e.keyCode == '40') this.remove_all_active_list();
};
remove_all_active_list = () => {
// boxes.forEach((element) => element.classList.remove('active'));
};
divElement = (el) => {
console.log(el);
el.forEach((element) => element.classList.add('active'))
};
render() {
return (
<div className="container0">
<List divElement={this.divElement} />
</div>
);
}
}
export default App;
List.js
import React, { Component } from 'react';
import data from './content/data';
export class List extends Component {
divRef = React.createRef();
componentDidMount() {
this.props.divElement(this.divRef)
}
render() {
let listItem = data.map(({ title, src }, i) => {
return (
<div className="box1" id={i} ref={this.divRef} key={src}>
<img src={src} title={title} align="center" alt={title} />
<span>{title}</span>
</div>
);
});
return <div className="container1">{listItem}</div>;
}
}
export default List;
Please tell me how can I over come this problem.

The short answer
You wouldn't.
Instead you would conditionally add and remove the class to the element, the component, or to the collection.map() inside your React component.
Example
Here's an example that illustrates both:
import styles from './Example.module.css';
const Example = () => {
const myCondition = true;
const myCollection = [1, 2, 3];
return (
<div>
<div className={myCondition ? 'someGlobalClassName' : undefined}>Single element</div>
{myCollection.map((member) => (
<div key={member} className={myCondition ? styles.variant1 : styles.variant2}>
{member}
</div>
))}
</div>
);
};
export default Example;
So in your case:
You could pass active prop to the <ListItem /> component and use props.active as the condition.
Alternatively you could send activeIndex to <List /> component and use index === activeIndex as the condition in your map.
Explanation
Instead of adding or removing classes to a HTMLElement react takes care of rendering and updating the whole element and all its properties (including class - which in react you would write as className).
Without going into shadow dom and why react may be preferable, I'll just try to explain the shift in mindset:
Components do not only describe html elements, but may also contain logic and behaviour. Every time any property changes, at the very least the render method is called again, and the element is replaced by the new element (i.e. before without any class but now with a class).
Now it is much easier to change classes around. All you need to do is change a property or modify the result of a condition (if statement).
So instead of selecting some elements in the dom and applying some logic them, you would not select any element at all; the logic is written right inside the react component, close to the part that does the actual rendering.
Further reading
https://reactjs.org/docs/state-and-lifecycle.html
Please don't hessitate to add a comment if something should be rephrased or added.

pass the ref to the parent div in List component.
...
componentDidMount() {
this.props.divElement(this.divRef.current)
}
...
<div ref={this.divRef} className="container1">{listItem}</div>
then in App
divElement = (el) => {
console.log(el);
el.childNodes.forEach((element) => element.classList.add('active'))
}
hope this will work. here is a simple example
https://codesandbox.io/s/staging-microservice-0574t?file=/src/App.js

App.js
import React, { Component } from "react";
import List from "./List";
import "./styles.css";
export class App extends Component {
state = { element: [] };
ref = React.createRef();
componentDidMount() {
const {
current: { divRef = [] }
} = this.ref;
divRef.forEach((ele) => ele?.classList?.add("active"));
console.log(divRef);
window.addEventListener("keydown", this.keypressed);
}
keypressed = (e) => {
if (e.keyCode == "38" || e.keyCode == "40") this.remove_all_active_list();
};
remove_all_active_list = () => {
const {
current: { divRef = [] }
} = this.ref;
divRef.forEach((ele) => ele?.classList?.remove("active"));
// boxes.forEach((element) => element.classList.remove('active'));
console.log(divRef);
};
render() {
return (
<div className="container0">
<List divElement={this.divElement} ref={this.ref} />
</div>
);
}
}
export default App;
List.js
import React, { Component } from "react";
import data from "./data";
export class List extends Component {
// divRef = React.createRef();
divRef = [];
render() {
let listItem = data.map(({ title, src }, i) => {
return (
<div
className="box1"
key={i}
id={i}
ref={(element) => (this.divRef[i] = element)}
>
<img src={src} title={title} align="center" alt={title} width={100} />
<span>{title}</span>
</div>
);
});
return <div className="container1">{listItem}</div>;
}
}
export default List;
Create ref for List component and access their child elements. When key pressed(up/down arrow) the elements which has classname as 'active' will get removed. reference

How do I add the ability to edit text within a react component?

So here's the user function I'm trying to create:
1.) User double clicks on text
2.) Text turns into input field where user can edit text
3.) User hits enter, and upon submission, text is updated to be edited text.
Basically, it's just an edit function where the user can change certain blocks of text.
So here's my problem - I can turn the text into an input field upon a double click, but how do I get the edited text submitted and rendered?
My parent component, App.js, stores the function to update the App state (updateHandler). The updated information needs to be passed from the Tasks.jsx component, which is where the text input is being handled. I should also point out that some props are being sent to Tasks via TaskList. Code as follows:
App.js
import React, {useState} from 'react';
import Header from './Header'
import Card from './Card'
import cardData from './cardData'
import Dates from './Dates'
import Tasks from './Tasks'
import Footer from './Footer'
import TaskList from './TaskList'
const jobItems= [
{
id:8,
chore: 'wash dishes'
},
{
id:9,
chore: 'do laundry'
},
{
id:10,
chore: 'clean bathroom'
}
]
function App() {
const [listOfTasks, setTasks] = useState(jobItems)
const updateHandler = (task) => {
setTasks(listOfTasks.map(item => {
if(item.id === task.id) {
return {
...item,
chore: task.chore
}
} else {
return task
}
}))
}
const cardComponents = cardData.map(card => {
return <Card key = {card.id} name = {card.name}/>
})
return (
<div>
<Header/>
<Dates/>
<div className = 'card-container'>
{cardComponents}
</div>
<TaskList jobItems = {listOfTasks} setTasks = {setTasks} updateHandler = {updateHandler}/>
<div>
<Footer/>
</div>
</div>
)
}
export default App;
Tasks.jsx
import React, {useState} from 'react'
function Tasks (props) {
const [isEditing, setIsEditing] = useState(false)
return(
<div className = 'tasks-container'>
{
isEditing ?
<form>
<input type = 'text' defaultValue = {props.item.chore}/>
</form>
: <h1 onDoubleClick ={()=> setIsEditing(true)}>{props.item.chore}</h1>
}
</div>
)
}
export default Tasks
TaskList.jsx
import React from 'react'
import Tasks from './Tasks'
function TaskList (props) {
const settingTasks = props.setTasks //might need 'this'
return (
<div>
{
props.jobItems.map(item => {
return <Tasks key = {item.id} item = {item} setTasks = {settingTasks} jobItems ={props.jobItems} updateHandler = {props.updateHandler}/>
})
}
</div>
)
}
export default TaskList

You forgot onChange handler on input element to set item's chore value.
Tasks.jsx must be like below
import React, {useState} from 'react'
function Tasks (props) {
const [isEditing, setIsEditing] = useState(false)
const handleInputChange = (e)=>{
// console.log( e.target.value );
// your awesome stuffs goes here
}
return(
<div className = 'tasks-container'>
{
isEditing ?
<form>
<input type = 'text' onChange={handleInputChange} defaultValue = {props.item.chore}/>
</form>
: <h1 onDoubleClick ={()=> setIsEditing(true)}>{props.item.chore}</h1>
}
</div>
)
}
export default Tasks

So, first of all, I would encourage you not to switch between input fields and divs but rather to use a contenteditable div. Then you just use the onInput attribute to call a setState function, like this:
function Tasks ({item}) {
return(
<div className = 'tasks-container'>
<div contenteditable="true" onInput={e => editTask(item.id, e.currentTarget.textContent)} >
{item.chore}
</div>
</div>
)
}
Then, in the parent component, you can define editTask to be a function that find an item by its id and replaces it with the new content (in a copy of the original tasks array, not the original array itself.
Additionally, you should avoid renaming the variable between components. (listOfTasks -> jobItems). This adds needless overhead, and you'll inevitably get confused at some point which variable is connected to which. Instead say, <MyComponent jobItems={jobItems} > or if you want to allow for greater abstraction <MyComponent items={jobItems} > and then you can reuse the component for listable items other than jobs.

See sandbox for working example:
https://codesandbox.io/s/practical-lewin-sxoys?file=/src/App.js
Your Task component needs a keyPress handler to set isEditing to false when enter is pressed:
const handleKeyPress = (e) => {
if (e.key === "Enter") {
setIsEditing(false);
}
};
Your updateHandler should also be passed to the input's onChange attribute, and instead of defaultValue, use value. It also needs to be reconfigured to take in the onChange event, and you can map tasks with an index to find them in state:
const updateHandler = (e, index) => {
const value = e.target.value;
setTasks(state => [
...state.slice(0, index),
{ ...state[index], chore: value },
...state.slice(index + 1)
]);
};
Finally, TaskList seems like an unnecessary middleman since all the functionality is between App and Task; you can just render the tasks directly into a div with a className of your choosing.

react-edit-text is a package I created which does exactly what you described.
It provides a lightweight editable text component in React.
A live demo is also available.

Cannot update the app state from custom component using React and Redux

I have the following Codesandbox.io:
https://codesandbox.io/s/qxkq5vvm1q
which is a basic ReactJS / Redux application.
The key components here are:
a Select which gets its values something like through this way: Redux (state manager) -> PanelMaterialSize (container) -> Select
one Updater component which takes care of update the values available on the Select through Redux
Alert button, which when clicked should alert the value stored on the store
What should happen is:
when the user changes an option on the Select, that value should be stored on the store. This is actually happening properly - OK
if the Select gets its values changed (for example because the Updater component), then it should automatically change the value stored on the store with the value it is showing (something similar as if the user changes the value on it). Unfortunately this is not happening - The Goal
Here are some of the codes:
./src/controls/Select/Select.js
import React, { Component } from "react";
import "./Select.scss";
class Select extends Component {
constructor(props) {
super(props);
let { name, data, className, ...controlProps } = this.props;
this.name = name;
this.data = data;
this.controlProps = controlProps;
this.state = {
[name]: data,
className
};
}
render() {
let data = this.state[this.name];
return (
<div className="control-select" {...this.controlProps}>
<div className="custom-dropdown custom-dropdown--grey">
<select className="custom-dropdown__select custom-dropdown__select--grey">
{this.props.data.length > 0 &&
this.props.data.map((elem, index) => {
return (
<option value={elem.value} key={index}>
{elem.text}
</option>
);
})}
</select>
</div>
</div>
);
}
}
export default Select;
src/controls/PanelMaterialSize/PanelMaterialSize.js
import React, { Component } from "react";
import { connect } from "react-redux";
import "./PanelMaterialSize.scss";
import Select from "../Select/Select";
import { setThemeList, setSelectedTheme } from "../../store/AppConfig/actions";
class PanelMaterialSize extends Component {
constructor(props) {
super(props);
this.state = {
selection: "",
options: []
};
}
handleChange = e => {
let target = e.target;
let value = target.value;
this.props.setSelectedTheme(value);
};
render() {
return (
<div className="partial-designer-panel-material-size">
<div>
<div className="label-input">
<div className="label">THEME</div>
<div className="input">
<Select
name="selection"
value={this.state.selection}
data={this.props.themeList}
style={{ width: "100%" }}
onChange={this.handleChange}
/>
</div>
</div>
</div>
</div>
);
}
}
const mapStateToProps = appState => {
return {
themeList: appState.appConfig.themeList,
selectedTheme: appState.appConfig.selectedTheme,
};
};
const mapDispatchToProps = dispatch => {
return {
setThemeList: themeList => dispatch(setThemeList(themeList)),
setSelectedTheme: selectedTheme => dispatch(setSelectedTheme(selectedTheme)),
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(PanelMaterialSize);
Any idea on how to make the point 2 work?
If possible, please, provide back your solution on a forked Codesandbox.io.
Thanks!

Updater component is producing new list of themes every 3seconds
It must also dispatch setSelectedTheme action to update selected theme in application state

react-select can load async data

I'm trying to build a select component using react-select plugin.
In the process of implementing this project, I have some kind of tricky problem with that. Check out my source code here: https://codesandbox.io/s/j148r99695
The problem that I have is I want to fetch all genresList data from the server and mapping them to select component. But somehow or I do wrong something, It's not working. Please see source code above to help me.
I fetch data from Movies component. Its work well and I pass a props to FormFilter component: <FormFilter genresList={this.state.genres} />. And in the FormFilter component, I check this.props.genresList, it's available. But when I'm trying to assign it to FormFilter state and console.log("state", this.state.genres); that. It's empty. Anyone can tell me why?
Default react-select using value and label to display data to select component. But you know some cases we have to custom that. I try it out by using map to transform to other arrays. But It's the best way? How can I custom valueKey and labelKey.
I'm using react-select beta version2.
UPDATE: I was fixed my project. Please check out the link below. Somehow it's not working. I was commend inside source code.
https://codesandbox.io/s/moym59w39p

So to make it works I have changed the FormFilter.js implementation:
import React, { Component } from "react";
import * as Animated from "react-select/lib/animated";
import AsyncSelect from "react-select/lib/Async";
class FormFilter extends Component {
constructor(props) {
super(props);
this.state = {
inputValue: "",
selectedOption: "",
genres: []
};
}
selectGenreHandleChange = newValue => {
const inputValue = newValue.replace(/\W/g, "");
this.setState({ inputValue });
console.log(inputValue);
};
componentDidMount() {
this.genresOption();
}
filterGenres = inputValue => {
const genres = this.genresOption();
//HERE - return the filter
return genres.filter(genre =>
genre.label.toLowerCase().includes(inputValue.toLowerCase())
);
};
promiseOptions = inputValue => {
return new Promise(resolve => { // HERE - you have to return the promise
setTimeout(() => {
resolve(this.filterGenres(inputValue));
}, 1000);
});
};
genresOption() {
const options = [];
const genres = this.props.genresList.genres; //HERE - array is genres in genresList
if (genres && genres instanceof Array) {
genres.map(genre => options.push({ value: genre.id, label: genre.name}));
}
return options;
}
render() {
const { inputValue } = this.state;
if (this.state.genres) console.log("state", this.state.genres);
if (this.props.genresList)
console.log("Movies props", this.props.genresList);
return (
<div className="filter_form">
<span className="search_element full">
<label htmlFor="genres">Genres</label>
<AsyncSelect
className="select genres"
classNamePrefix="tmdb_select"
isMulti
isSearchable="true"
isClearable="true"
cacheOptions
components={Animated}
value={inputValue}
defaultOptions
onInputChange={this.selectGenreHandleChange}
loadOptions={this.promiseOptions}
/>
</span>
</div>
);
}
}
export default FormFilter;
I have write a comment "HERE - something" to let you know what I changed. There are not big problems :)

I did some changed in your FIDDLE and it's works for me
Something like
import React, {Component} from "react";
import { render } from 'react-dom';
import Movies from './Movies';
import "./styles.css";
class App extends Component {
render() {
return (
<div className="App">
<Movies />
</div>
);
}
}
let a = document.getElementById("root");
render(<App />, a);