We Keep Coding

Reusing React 'key'

I want to know it's normal to reuse react key from component to component. In Row component i got key From column component and reuse it for mapping Row childrens
const Table = props => {
const { data, children, showHeader } = props;
return (
<div className="table">
{showHeader && <TableHead children={children} />}
{data.map(data => {
return <Row key={data.id} data={data} children={children} />;
})}
</div>
);
};
const TableHead = props => {
const { children } = props;
return (
<div className="table-row">
{children.map(col => {
const { title, field, width } = col.props;
return (
<div className="table-col" key={field}>
<div
className="table-cell table-cell-head"
style={{
width: width
}}
>
{title}
</div>
</div>
);
})}
</div>
);
};
//HERE I GET key from Column component and reuse it for rows (number of columns === number of rows)
const Row = props => {
const { data, children } = props;
return (
<div className="table-row">
{children.map(col => {
let { field, ...rest } = col.props;
const { key } = col;
return (
<div className="table-col" key={key}>
{React.cloneElement(col, {
...rest,
field,
data
})}
</div>
);
})}
</div>
);
};
const Column = props => {
const { field, data, width } = props;
return (
<div
style={{
width: width
}}
className="table-cell"
key={data.id}
>
{data[field]}
</div>
);
};
const HeadRow = props => {
const { children } = props;
return (
<div className="table-row">
{children.map(col => {
const { title, field, width } = col.props;
return (
<div className="table-col" key={field}>
<div
className="table-cell table-cell-head"
style={{
width: width
}}
>
{title}
</div>
</div>
);
})}
</div>
);
};
const initData = [
{
id: 1,
name: "Ivan",
age: "My age is 27",
enabled: true,
myListValue: [
{
myName: "Duncan",
myDescription: "Immortal!",
myGroup: "Immortal",
createDate: "2019-08-12T05:21:28Z"
}
],
lastChanged: new Date(),
sortable: true
},
{
id: 2,
name: "Vitaly",
age: `My age is 25\nMy age is 25\nMy age is 25\n`,
lastChanged: new Date(),
enabled: true,
sortable: true
},
{
id: 3,
name: "Sergey",
age: "My age is 29",
enabled: true,
myListValue: [
{
myName: "Duncan",
myDescription: "Immortal!",
myGroup: "Immortal",
createDate: "2019-08-12T05:21:28Z"
},
{
myName: "Connor",
myDescription: "Immortal2!",
myGroup: "MacLeods",
createDate: "2019-08-12T05:21:28Z"
},
{
myName: "John Snow",
myDescription: "(he knows nothing)",
myGroup: "WhiteWalkers",
createDate: "2019-08-12T05:21:28Z"
},
{
myName: "Jamie Lannister",
myDescription: "Lannisters always pay their debts",
myGroup: "Red castle",
createDate: "2019-08-12T05:21:28Z"
}
],
lastChanged: new Date()
}
];
ReactDOM.render(
<Table data={initData} showHeader={true} sortableConfig={{}}>
<Column key="0" field="name" width={150} title="Name" sortable="true" />
<Column key="1" field="age" width={150} title="AGe" sortable="true" />
</Table>, document.getElementById('root'))
.App {
font-family: sans-serif;
text-align: center;
display: flex;
flex-wrap: wrap;
}
.table {
border: 1px solid;
border-bottom: none;
}
.table-row {
width: 100%;
border-bottom: 1px solid;
display: flex;
}
.table-col {
border-right: 1px solid;
}
.table-col:last-child {
border: none;
}
.table-cell {
white-space: pre-line;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
box-sizing: border-box;
}
.table-cell-head {
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Keys help React identify which items have changed, are added, or are
removed.
Keys should be given to the elements inside the array to give them a stable identity, and they only make sense in the context of the surrounding array, so it doesn't matter if two isolated lists have elements with equal keys as long as they are not equal inside the same list (repeated ids). There is no problem with the following code
{
arr.map((item,index) =>{
//defining key only once per `arr` iteration
const key = uniqueId(index)
return(
<div key={key}>
{
arr2.map((item, index) => <span key={key} />)
}
</div>
)
})
}
Note that the key is only relevant within a particular parent React element. React won’t try to “match up” elements with the same keys between different parents. (React doesn’t have idiomatic support for moving a host instance between different parents without re-creating it.) Font
See the docs here

Tic tac toe rutorial : How can I trigger multiple callback functions?

The tutorial avoids using nested components doing this:
render() {
const status = 'Next player: X';
return (
<div>
<div className="status">{status}</div>
<div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
<div className="board-row">
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</div>
<div className="board-row">
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
</div>
);
}
Suppose one wanted to nest the cells inside a row like this:
function Square(props) {
return (
<div onClick={props.onClick} className="square">
[{props.row}.{props.cell}]
</div>
);
}
function Row(props) {
return <div className="row">{props.children}</div>;
}
function Cells(props) {
let squares = [];
for (let i = 0; i < COLUMNS; i++) {
squares.push(<Square row={props.row} cell={i} onClick={props.onClick} />);
}
return squares;
}
Then Inside Board class how one would create a callback with both row and column? I'm able to pass row, but I can't see how to pass the column click as this is actually inside Cells. The state is lifted up in Board.
class Board extends React.Component {
constructor(props) {
super(props);
this.state = {
board: [
[{ value: 1, visible: 0 }, { value: 2, visible: 0 }],
[{ value: 2, visible: 0 }, { value: 1, visible: 0 }]
],
player_turn: 0, //0,1,2,3
player1: 0,
player2: 0
};
}
handleClick(e) {
alert(e.row + "." + e.cell);
}
renderSquares() {
const rows = [];
for (let i = 0; i < ROWS; ++i) {
let event = { row: i, cell: -1 };
rows.push(
<Row>
<Cells
row={i}
values={this.state.board[i]}
onClick={() => this.handleClick(event)}
event={event}
/>
</Row>
);
}
return rows;
}
render() {
return <div>{this.renderSquares()}</div>;
}
}

Just pass down column and handleClick! Check out the code below. And I don't really see what the Cells component is doing, so didn't keep that, but you could achieve the same thing even if you kept Cells. Now Row has a bunch of Squares as children which makes sense to me :)
function Square({ row, column, onClick, cell }) {
return (
<div className="square" onClick={() => onClick({ row, column, ...cell })}>
[{row}.{column}]
</div>
);
}
function Row({ children }) {
return <div className="row">{children}</div>;
}
class Board extends React.Component {
constructor(props) {
super(props);
this.state = {
board: [
[{ value: 1, visible: 0 }, { value: 2, visible: 0 }],
[{ value: 2, visible: 0 }, { value: 1, visible: 0 }]
],
playerTurn: 0, //0,1,2,3
player1: 0,
player2: 0
};
}
handleClick({ row, column, value, visible }) {
let { playerTurn } = this.state;
playerTurn++;
this.setState({ playerTurn });
alert(`${row}.${column} - value: ${value}, visible: ${visible} - player turn: ${playerTurn}`);
}
renderSquares() {
return this.state.board.map((cells, row) => (
<Row key={row}>
{cells.map((cell, column) => (
<Square
cell={cell}
key={column}
row={row}
column={column}
onClick={this.handleClick.bind(this)}
/>
))}
</Row>
));
}
render() {
return <div>{this.renderSquares()}</div>;
}
}
ReactDOM.render(<Board />, document.getElementById("app"));
.row {
display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></app>

I want to loop through array and dynamically output result.. if there is no match I would like to output another result

I have an array of objects and when the user inputs a zipcode and click I want to loop through the array and if the users zipcode matches a zip code in the array output results if the zipcode dose not match output another result
I have attempted to use map and forEach on the array and each allow me to find the zipcode and provide out put Im running into trouble when the zipcodes do not match
class PricingTool extends Component {
state = {
zipCode: "",
finalZip: "",
routine: "",
rush: "",
sameDay: "",
city: "",
match: false
};
handleKeypress = e => {
const { zipCode } = this.state;
if (e.which === 13 && zipCode.length === 5) {
console.log("enterrerre");
this.zipcodeHandler();
}
};
zipcodeHandler = () => {
const { zipCode } = this.state;
this.setState({
finalZip: zipCode,
});
};
changeHandler = e => {
e.preventDefault();
if (e.target.value.length <= 5 && !isNaN(e.target.value)) {
this.setState({
[e.target.name]: e.target.value
});
}
};
render() {
const { finalZip, zipCode, match } = this.state;
let searchResult;
if(finalZip){
searchResult = zipCodes.map(cur => {
if (finalZip && finalZip == cur.zip) {
return (
<div className="pricing__searchResult">
<h1 className="pricing__searchResult-1">
We do serve in {cur.city}, Indiana
</h1>
<div className="pricing__searchResult-2">Same-Day</div>
<div className="pricing__searchResult-3">{cur.fees.sameDay}</div>
<div className="pricing__searchResult-4">Rush</div>
<div className="pricing__searchResult-5">{cur.fees.rush}</div>
<div className="pricing__searchResult-6">Routine</div>
<div className="pricing__searchResult-7">{cur.fees.routine}</div>
<div className="pricing__searchResult-8">
Please call us or email info#ccprocess.com to order
</div>
</div>
);
}
});
}
I would like it to find the user inputed zip code if it is in the data array and if it is not then render another message

Instead of using a Array map method, which would map each value of the array to something else (in your case, it would only map the zipcode found), you can (and should) use a better method for the job. The find method will find the first item that meet your criteria and return it, in your case, it could be finalZip && (finalZip == cur.zip). If no item is found for the expression given, undefined is returned.
render() {
const { finalZip, zipCode, match } = this.state;
let searchResult;
if(finalZip){
searchResult = zipCodes.find(cur => finalZip && (finalZip == cur.zip));
if(searchResult) {
// do something for when the zip code is found
}
else {
// do something when no zip code is found
}
}
}
Array find method documentation: MDN

Being not sure what all components you used or are currently in your application, I created a sample app which kind of simulates your requirement and possibly delivers the correct output.
So here, I had no idea of where the input will be taken from the user and how your onKeyPress listener would work, so I created another component that renders your data based on the input and check if that zipcode exist or not.
Like shown below, your ZipCode related information will be render by another component ZipTool and your input box is handled by PricingTool
Also, here's the jsfiddle if you want to play around with the code - https://jsfiddle.net/hf9Ly6o7/3/
I hope you find this useful.
class ZipTool extends React.Component {
constructor(props) {
super(props);
}
render() {
let { data } = this.props;
return (
<div>
<h1 className="pricing__searchResult-1">We do serve in { data.city }, Indiana</h1>
<div className="pricing__searchResult-2">Same-Day</div>
<div className="pricing__searchResult-3">{ data.fees.sameDay }</div>
<div className="pricing__searchResult-4">Rush</div>
<div className="pricing__searchResult-5">{ data.fees.rush }</div>
<div className="pricing__searchResult-6">Routine</div>
<div className="pricing__searchResult-7">{ data.fees.routine }</div>
</div>
);
}
}
class PricingTool extends React.Component {
constructor(props) {
super(props)
this.state = {
zipCodes: [
{
'zipcode': '12345',
'city': 'abc',
'fees': {
'sameDay': '43',
'rush': '90',
'routine': '20'
}
},
{
'zipcode': '54321',
'city': 'xyz',
'fees': {
'sameDay': '25',
'rush': '35',
'routine': '10'
}
}
],
zipCode: "",
finalZip: "",
routine: "",
rush: "",
sameDay: "",
city: "",
match: false
}
}
changeHandler(e) {
this.setState({
zipCode: e.target.value,
});
for (let code of this.state.zipCodes) {
if( code.zipcode === e.target.value ){
this.setState({match: true, finalZip: code})
break;
}
else {
this.setState({match: false, finalZip: null})
}
}
};
render() {
return (
<div>
<input type="text" onChange={this.changeHandler.bind(this)} onKeyPress={this.handleKeyPress} name={this.state.zipCode}></input>
<div className="pricing__searchResult">
{ this.state.finalZip ? <ZipTool data={this.state.finalZip} /> : <div>Not Found</div> }
<div className="pricing__searchResult-8">
Please call us or email info#ccprocess.com to order
</div>
</div>
</div>
)
}
}
ReactDOM.render(<PricingTool />, document.querySelector("#app"))
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
.done {
color: rgba(0, 0, 0, 0.3);
text-decoration: line-through;
}
input {
margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

React - change css style in one specific state

What I want to do is to change the border on the input to red if the input value doesn't match any movie in the API call.
The user types in the input field and the call to the API shows the matching result.
If we don't have any result I would like the border on the input to be red.
But I can't see how I should make that happen.
The component Input is at the end of the code snippet.
CSS
.input-style {
padding: 7px;
border-radius: 5px;
border: 1px solid #cccccc;
font-family: Courier New, Courier, monospace;
transition: background-color 0.3s ease-in-out;
outline: none;
}
.input-style:focus {
border: 1px solid turquoise;
}
APP.js
class App extends Component {
constructor() {
super();
this.state = {
value: '',
items: [],
isLoading: false,
searchResult: null,
error: false,
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
// To handle search
handleChange(e) {
this.setState({ value: e.target.value });
}
handleSubmit(e) {
let searchResult = [];
for (var i = 0; i < this.state.items.length; i++) {
if (
this.state.items[i].name
.toLowerCase()
.indexOf(this.state.value.toLowerCase()) !== -1
) {
searchResult.push(this.state.items[i]);
} else {
console.log('No matches on your search, try again');
}
}
e.preventDefault();
// If we have something in the object searchResult
if (searchResult.length > 0) {
this.setState({
error: false,
value: '',
searchResult: searchResult,
});
} else {
this.setState({
error: true,
value: '',
searchResult: [],
});
}
}
// call to the API
componentDidMount() {
this.setState({ isLoading: !this.state.isLoading });
fetch('https://api.tvmaze.com/shows')
.then(response => response.json())
.then(data => {
this.setState({
items: data,
error: false,
});
this.setState({ isLoading: !this.state.isLoading });
})
.catch(console.error);
}
render() {
return (
<div className="App">
<Header />
<Loader isLoading={this.state.isLoading} />
<Input
handleChange={this.handleChange}
handleSubmit={this.handleSubmit}
value={this.state.value}
/>
{this.state.error ? (
<p className="errorMsg">No match on the search, try again!</p>
) : null}
<Search search={this.state.searchResult} />
</div>
);
}
}
export default App;
Input.js
function Input(props) {
return (
<div>
<form onSubmit={props.handleSubmit}>
<input
type="text"
className="input-style"
placeholder="Sök efter film.."
value={props.value}
onChange={props.handleChange}
/>
<button id="bold" className="button-style" type="submit">
<i className="fa fa-search" />
</button>
</form>
</div>
);
}
export default Input;

You can pass the error into the Input component from the App
<Input
handleChange={this.handleChange}
handleSubmit={this.handleSubmit}
value={this.state.value}
error={this.state.error)
/>
and in your Input component:
<input
type="text"
className={props.error ? 'error-input-style' : 'input-style'}
placeholder="Sök efter film.."
value={props.value}
onChange={props.handleChange}
/>
alternative you can also set an inline styling for the error condition:
<input
type="text"
className="input-style"
placeholder="Sök efter film.."
value={props.value}
onChange={props.handleChange}
style={{ border: props.error ? '1px solid red' : '' }}
/>

You can easily do this. Have a flag, say resultFound, in the state of App.js, with an initial value of false. Then, in the function where you make the API call, update this resultFound depending on whether any result was obtained.
And, in the render(), before returning, assign inputClassName dynamically based on the this.state.resultFound, like so,
let inputClassName = '';
if (this.state.resultFound === false) {
inputClassName = 'input-style-error'; // new CSS class for errors
} else {
inputClassName = 'input-style';
}
Then, you can pass the inputClassName as a prop to Input and use it as <input>'s className, like so,
// in your App.js render() method's return
// ... existing components
<Input customStyle={inputClassName} ... />
// ...
<!-- in your Input.js render() method -->
<input type="text" className={props.customStyle} ... />
Whenever the API call happens, your state will change causing a re-render of the DOM (render() is called). During each call, we dynamically set the inputClassName based on the state's resultFound. And, accordingly, the right className will be applied to the <input>.

I will give bad names for classes and variables, just to make it super clear. You should use more generic ones.
The trick here is to give your Input a dynamic class via props, and if that expression turns true and the class is appended to the element, you can style it with css.
__CSS__
.input-style {
padding: 7px;
border-radius: 5px;
border: 1px solid #cccccc;
font-family: Courier New, Courier, monospace;
transition: background-color 0.3s ease-in-out;
outline: none;
}
.input-style:focus {
border: 1px solid turquoise;
}
.input-style.red-border {
border: 1px solid red;
}
__APP.js__
class App extends Component {
constructor() {
super();
this.state = {
value: '',
items: [],
isLoading: false,
searchResult: null,
error: false,
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
// To handle search
handleChange(e) {
this.setState({ value: e.target.value });
}
handleSubmit(e) {
let searchResult = [];
for (var i = 0; i < this.state.items.length; i++) {
if (
this.state.items[i].name
.toLowerCase()
.indexOf(this.state.value.toLowerCase()) !== -1
) {
searchResult.push(this.state.items[i]);
} else {
console.log('No matches on your search, try again');
}
}
e.preventDefault();
// If we have something in the object searchResult
if (searchResult.length > 0) {
this.setState({
error: false,
value: '',
searchResult: searchResult,
});
} else {
this.setState({
error: true,
value: '',
searchResult: [],
});
}
}
// call to the API
componentDidMount() {
this.setState({ isLoading: !this.state.isLoading });
fetch('https://api.tvmaze.com/shows')
.then(response => response.json())
.then(data => {
this.setState({
items: data,
error: false,
});
this.setState({ isLoading: !this.state.isLoading });
})
.catch(console.error);
}
render() {
return (
<div className="App">
<Header />
<Loader isLoading={this.state.isLoading} />
<Input
handleChange={this.handleChange}
handleSubmit={this.handleSubmit}
value={this.state.value}
showRedBorder={this.state.error === true} // or what ever your logic
/>
{this.state.error ? (
<p className="errorMsg">No match on the search, try again!</p>
) : null}
<Search search={this.state.searchResult} />
</div>
);
}
}
export default App;
__Input.js__
function Input(props) {
return (
<div>
<form onSubmit={props.handleSubmit}>
<input
type="text"
className={`input-style${props.showRedBorder ? ' red-border' : ''}`}
placeholder="Sök efter film.."
value={props.value}
onChange={props.handleChange}
/>
<button id="bold" className="button-style" type="submit">
<i className="fa fa-search" />
</button>
</form>
</div>
);
}
export default Input;

How do I access object values in data mapped from .json using JavaScript?

I'm trying to use data from an API (https://messi.hyyravintolat.fi/publicapi/restaurant/11/) in my React project. I was able to render each "date" from the API, but how do I render each "name" for each "date" in with this kind of .json (the ones immediately inside the "data" arrays in the API)? {item.data[name]} doesn't seem to be the way to do this. Here is the component class I'm using to get and render the data:
import React from 'react';
/*eslint-env jquery*/
class TestMenu extends React.Component {
constructor(props) {
super(props);
this.state = { food: [] };
}
componentDidMount() {
this.UserList();
}
UserList() {
$.getJSON('https://messi.hyyravintolat.fi/publicapi/restaurant/11/')
.then(({ data }) => this.setState({ food: data }));
}
render() {
const foods = this.state.food.map((item, i) => (
<div>
<h1>{item.date}</h1>
<p>{item.data[name]}</p>
</div>
));
return (
<div id="layout-content" className="layout-content-wrapper">
<div className="panel-list">{foods}</div>
</div>
);
}
}
export default TestMenu;

After looking at the datasource, the JSON is in the following shape:
[
{
"date": some date,
"data": [
{
"name": some name,
...
},
{
"name": some other name,
...
}
...
]
},
{
"date": some other date,
"data": [ ... ]
},
...
]
So there are several names for a single date. You could render this like the following:
<h1>{item.date}</h1>
<ul>
{item.data.map((d, idx) => {
return <li key={idx}>{d.name}</li>
)}
</ul>
Note that I also use the indices when mapping the data in order to provide a unique key to React for each <li> element.

That's because you need a second loop as data (the nested one) is an array and not an object.
A simple example of looping with your data structure:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
list: []
};
}
componentDidMount() {
axios
.get("https://messi.hyyravintolat.fi/publicapi/restaurant/11/")
.then(({ data }) => {
this.setState({
list: data.data
});
});
}
render() {
const { list } = this.state;
return (
<div>
<ul>
{
list && list.map((obj) => {
return (
<li className="item">
<div className="date">
<span>Date: </span> <span>{obj.date}</span>
</div>
<div className="names">
{
obj.data.map((obj2) => {
return (
<div className="name">
<span>Name: </span> <span>{obj2.name}</span>
</div>
)
})
}
</div>
</li>
)
})
}
</ul>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
.item {
list-style: none;
border: 1px solid #ccc;
padding: 10px;
}
.date {
font-weight: bold;
}
.names {
text-indent: 15px;
}
.name{
margin: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.js"></script>
<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>