Develop Reference

How to create search in react.js inside a Component

i have my react redux project, that i am wanting to add a search to the menuItems Component. but i cant seem to figure out how to search over the existing map. ive created a input with the onChange event that sets the state to the input term. but i cant semm what to do after that.
class MenuItems extends Component {
state = {
searchTerm: '',
}
handleclick = (item) => {
this.props.deleteMenuItem(item.id);
}
handleSearch = (event) => {
this.setState({
[event.target.name]: event.target.value
})
}
filteredItem = () => {
let filtered = [...this.props.menuItems].filter(item => item.name === "burger")
}
render(){
let showItems = this.props.menuItems;
return (
<div>
<input
placeholder="search"
name="searchTerm"
type="text"
value={this.state.searchTerm}
onChange={this.handleSearch}
/>
{showItems.map((item) =>(
<li class="list" key={item.id}>
{item.name}
<br></br>
{item.body}
<br></br>
<img src={item.image}></img>
<br></br>
<button id={item.id} onClick={() => this.handleclick(item)}>delete </button>
</li>
))}
</div>
)
}
}
export default connect(null, {deleteMenuItem})(MenuItems)

It looks like you just need to filter with your searchTerm and it will work just fine.
class MenuItems extends Component {
state = {
searchTerm: "",
};
handleclick = (item) => {
this.props.deleteMenuItem(item.id);
};
handleSearch = (event) => {
this.setState({
[event.target.name]: event.target.value,
});
};
render() {
let showItems = this.props.menuItems;
const filtered =
[...this.props.menuItems].filter((item) =>
item.name.includes(this.state.searchTerm)
) ?? [];
return (
<div>
<input
placeholder="search"
name="searchTerm"
type="text"
value={this.state.searchTerm}
onChange={this.handleSearch}
/>
{showItems.map((item) => (
<li className="list" key={item.id}>
{item.name}
<br></br>
<button id={item.id} onClick={() => this.handleclick(item)}>
delete
</button>
</li>
))}
{filtered.map((item) => (
<li className="list" key={item.id}>
Filtered: {item.name}
<br></br>
</li>
))}
</div>
);
}
}
const App = () => {
return (
<div>
<MenuItems menuItems={[{ name: "name1" }, { name: "name2" }]} />
</div>
);
};

Set timeout on material UI drawer when open

I would like to close the drawer after a specific time however I dont think material UI drawer has that kind of props. Is there a way to use transitionDuration to close the drawer or maybe add a setTimeout in my function ? When adding a timeout in my toggleDrawer function, it won't notice the timeout.
<Drawer
className="draww"
anchor={anchor}
open={state[anchor]}
transitionDuration={2000}
onClose={toggleDrawer(anchor, false)}
>
<div className="drawer-title">
<Link to="/">
<h2>NOW NOW</h2>
</Link>
</div>
<a className="cl" onClick={toggleDrawer(anchor, false)}>
×
</a>
{/* {list(anchor)} */}
<br />
<div className="cart-drawer">
<h4>YOUR SELECTION</h4>
<div className="border-cart"></div>
{cartItems.map((data) => (
<div className="row thiss">
<Link
to={{ pathname: `/product/${data._id}` }}
onClick={toggleDrawer(anchor, false)}
>
{data.product_image && (
<img
className="drawer-pic"
src={data.product_image.secure_url}
alt=""
/>
)}
</Link>
<div className="col info-vart">
<Link
to={{ pathname: `/product/${data._id}` }}
onClick={toggleDrawer(anchor, false)}
>
<h2>{data.product_name.slice(0, 12)}</h2>
<h5>Ref:{data.product_details[1].TAILLE}</h5>
<button
onClick={() => removeProduct(data)}
className="remove"
>
DELETE
</button>
</Link>
</div>
<h3>€{data.product_price}</h3>
</div>
))}
<div className="border-cart"></div>
<div className="draw-down">
<div className="row ">
<p className="sub">TOTAL</p>
<p className="sub total">{formatNumber(total)}</p>
</div>
<div className="centerthis">
<button
type="button"
onClick={someFunc}
className="checkoutt"
role="link"
>
CHECKOUT
</button>
<PayPalScriptProvider
options={{
"client-id":
"",
currency: "EUR",
}}
>
<div
className="paypalll"
style={{
minWidth: "280px",
maxWidth: "280px",
}}
>
<PayPalButtons
style={{
layout: "horizontal",
height: 45,
}}
createOrder={(data, actions) => {
return actions.order.create({
purchase_units: [
{
amount: {
value: total,
},
},
],
});
}}
/>
</div>
</PayPalScriptProvider>
</div>
</div>
<br />
</div>
<br />
</Drawer>
Toggle drawer function
const toggleDrawer = (anchor, open, data) => (event) => {
if (
event.type === "keydown" &&
(event.key === "Tab" || event.key === "Shift")
) {
return addProduct(data);
}
setState({ ...state, [anchor]: open });
};

You can use a useEffect hook to close drawer after a timeout.
const allAnchors = ['left', 'right', 'top', 'bottom'];
for(let anchor of allAnchors) {
useEffect(() => {
if (state[anchor]) {
setTimeout(() => {
toggleDrawer(anchor, false)()
}, 2000); // close after 2000ms
}
}, [state[anchor]]);
}
I saw you're using anchor variable, hinting that you might have multiple directions for drawer.
If that's not the case, you can modify code and remove the for-loop entirely.
Here's a working example
const { useState, useEffect } = React;
const { Drawer, Button } = MaterialUI;
const App = (props) => {
const [ state, setState ] = useState({});
const allAnchors = [ 'left', 'right', 'top', 'bottom' ];
for(let anchor of allAnchors) {
useEffect(() => {
if (state[anchor]) {
setTimeout(() => {
toggleDrawer(anchor, false)()
}, 2000); // close after 2000ms
}
}, [state[anchor]]);
}
const toggleDrawer = (anchor, open, data) => (event) => {
if (
// check if event is not undefined
event &&
event.type === "keydown" &&
(event.key === "Tab" || event.key === "Shift")
) {
return addProduct(data);
}
if( typeof open === 'undefined') open = !state[anchor]
setState(s => ({ ...s, [anchor]: open }));
};
return (
<div>
{ allAnchors.map(anchor =>
(
<React.Fragment>
<Button onClick={toggleDrawer(anchor)} >
{anchor}
</Button>
<Drawer
anchor={anchor}
open={state[anchor]}
onClose={toggleDrawer(anchor, false)}
>
This is Drawer
</Drawer>
</React.Fragment>
))
}
</div>
)
}
ReactDOM.render(<App />, document.querySelector('#root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/#material-ui/core#4.12.1/umd/material-ui.development.js"></script>
<div id="root" />

How do I add a select all checkbox and add a checkbox for every option shown?

I was trying to add a select all check box and a checkbox for each and every row of countries listed. I am getting a checkbox but I am not understanding how to get the checkbox in every row. I am quite new to this and need to implement a simple search bar with a select all box and a checkbox for every row using controlled elements. Thanks!
import React, { Component, useCallback, useState } from "react";
import {
Button,
Input,
Footer,
Card,
CardBody,
CardImage,
CardTitle,
CardText
} from "mdbreact";
import blankImg from "./blank.gif";
import "./style.css";
import "./flags.min.css";
import countriesList from "./countries.json";
class App extends Component {
state = {
search: ""
};
handleClick = () => { this.setState({ search: ""}); }
renderCountry = country => {
const { search } = this.state;
var code = country.code.toLowerCase();
function toggle(source) {
checkboxes = document.getElementsByName('foo');
for(var checkbox in checkboxes)
checkbox.checked = source.checked;
}
return (
<div className="col-md-3" style={{ marginTop: "20px" }}>
<Card>
<CardBody>
<p className="">
<img
src={blankImg}
className={"flag flag-" + code}
alt={country.name}
/>
</p>
<CardTitle title={country.name}>
{country.name.substring(0, 15)}
{country.name.length > 15 && "..."}
</CardTitle>
</CardBody>
</Card>
</div>
);
};
onchange = e => {
this.setState({ search: e.target.value });
};
render() {
const { search } = this.state;
const filteredCountries = countriesList.filter(country => {
return country.name.toLowerCase().indexOf(search.toLowerCase()) !== -1;
});
return (
<div className="flyout">
<main style={{ marginTop: "4rem" }}>
<div className="container">
<div className="row">
<div className="col">
<Input
label="Search Country"
icon="search"
onChange={this.onchange}
/>
<button onClick={this.handleClick}> Click to clear</button>
<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>
</div>
<div className="col" />
</div>
<div className="row">
<input type="checkbox"></input>
{filteredCountries.map(country => {
return this.renderCountry(country);
})} <input type="checkbox" name="foo" value="bar1"> Bar 1</input>
</div>
</div>
</main>
<Footer color="indigo">
<p className="footer-copyright mb-0">
© {new Date().getFullYear()} Copyright
</p>
</Footer>
</div>
);
}
}
export default App;

Here I wrote working example, where you can see the data flow. All state we have in CountryList. And we provide checked value and setIsChecked handler to CountryItem component. Then we have allAreChecked state, using it we check all or uncheck all items.
import React, { useState } from "react";
const countriesList = [
{ label: "a", checked: false },
{ label: "b", checked: false },
{ label: "c", checked: false },
{ label: "d", checked: false },
];
const CountryItem = ({ checked, country, setIsChecked }) => {
return (
<div>
<h2>This country is {country}</h2>
<input type="checkbox" checked={checked} onClick={setIsChecked} />
</div>
);
};
const CountryList = () => {
const [countries, setCountries] = useState(countriesList);
const [allAreChecked, setAllAreChecked] = useState(false);
const checkItemHandler = (country) => {
setCountries(
countries.map((item) =>
item.label === country ? { ...item, checked: !item.checked } : item
)
);
};
const checkAllItemsHandler = () => {
const checked = !allAreChecked;
setAllAreChecked(checked);
setCountries(countries.map((item) => ({ ...item, checked })));
};
return (
<div>
{countries.map(({ label, checked }) => (
<CountryItem
key={label}
country={label}
checked={checked}
setIsChecked={() => checkItemHandler(label)}
/>
))}
<button onClick={checkAllItemsHandler}>
{allAreChecked ? "Uncheck" : "Check"} All
</button>
</div>
);
};
export default CountryList;

How to access index of .map() method outside of it in react

I want to access the index number outside of that map method because I want to use that index conditionally to show other component like if that index is checked then the component will show but I can't figure out how to access that outside of that map method. I have googled it but couldn't find any proper solution of that.
Here is my code!
import React, { Component, Fragment } from "react";
import Clear from "./clear";
import Display from "./display";
import NoOfItems from "./noOfItems";
class MainPage extends Component {
constructor() {
super();
this.state = {
data: [
{
name: "",
completed: false,
},
],
data: [],
checkValue: false,
};
}
handleChange = (e) => {
e.preventDefault();
this.setState({ name: e.target.value });
};
handleSubmit = (e) => {
e.preventDefault();
this.setState({
data: [...this.state.data, { name: this.state.name, completed: false }],
});
e.target.reset();
};
handleDelete = (index) => {
const newList = [...this.state.data];
newList.splice(index, 1);
this.setState({ data: newList });
};
handleAllCheck = (e) => {
e.preventDefault();
};
handleCheckChange = (index) => {
let newData = [...this.state.data];
newData[index].completed = !newData[index].completed;
this.setState({ data: newData });
};
render() {
return (
<Fragment>
<h1 className="display-1 text-center" style={{ color: "#f7c6c6" }}>
todos
</h1>
<form className="todo-form" onSubmit={this.handleSubmit}>
<label className="label" onClick={this.handleAllCheck}>
^
</label>
<input
autoFocus
type="text"
onChange={this.handleChange}
className="new-todo shadow-lg p-3 mb-5 bg-white"
placeholder="What needs to be done?"
/>
<ul className="list-group">
{this.state.data.map((data, index) => {
return (
<div key={"todo-" + index} className="div-list">
<input
className="check"
onChange={() => this.handleCheckChange(index)}
type="checkbox"
style={{
cursor: "pointer",
}}
defaultChecked={this.state.data.completed}
/>
<li
className="list-group-item disabled w-50 p-3 mx-auto"
style={{
textDecoration:
this.state.data[index].completed && "line-through",
}}
>
{data.name}
</li>
<button
onClick={() => this.handleDelete(index)}
type="button"
className="close"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
);
})}
</ul>
{this.state.data.length > 0 && <Display />}
{this.state.data.length > 0 && (
<NoOfItems noOfTodos={this.state.data.length} />
)}
{this.state.data.completed && <Clear />}
</form>
</Fragment>
);
}
}
export default MainPage;
Just ignore the rest and see the map method and its index. At the end of the code I have used this.state.data.completed at this point I want to use the index like this this.state.data[index].completed but its saying invalid declaration of Index. Please help me I am stuck!
Thank you in advance!

embedded function in .map to access mapped information

I am using a .map function to display details to user.
I would like a button so that when it is clicked it expands for the user displaying more in depth information.
As it is mapped I cannot set a function as I would normally (between constructor and render)as it would not understand the mapped information e.g r.AssignedWorkStation
essentially I am asking is it possible to put a function within here (example below) and then have this be able to access the mapped properties
const renderTodos = currentTodos.map(r => {
Test(){
if(me){
//function to do what I want
}
}
return (
<>
<div className="jumbotron">
<button className="btn btn-primary" style={{ float: "right" }}>
View Details
</button>
<br />
<li>
<b>Workstation : </b>
{r.AssignedWorkStation}
</li>
<li>
<b>Date: </b>
{r.Date}
</li>
<li>
<b>Status: </b>
{r.CompleteToken}
</li>
<br />
</div>
</>
);
});
Whole class code
var results = [];
class AdminWorkstations extends React.Component {
constructor() {
super();
this.state = {
questions: [],
viewDetails: false,
currentPage: 1,
todosPerPage: 4
};
this.getQuestionByUniqueDate = this.getQuestionByUniqueDate.bind(this);
// this.test = this.test.bind(this);
}
// sets the questions form sql into state for questions
handleClick = event => {
this.setState({
currentPage: Number(event.target.id)
});
};
// test() {
// alert(r.AssignedWorkStation);
// }
componentDidMount() {
fetch(`/admin-completed-workstations`)
.then(recordset => recordset.json())
.then(results => {
this.setState({ questions: results.recordset });
console.log(this.state.questions);
this.state.questions &&
this.getQuestionByUniqueDate(this.state.questions);
});
}
handlePageChange(pageNumber) {
this.setState({ activePage: pageNumber });
}
getQuestionByUniqueDate(questions) {
for (var i = 0; i < questions.length; i++) {
if (
!results.find(q => q.Date == questions[i].Date) ||
!results.find(
q => q.AssignedWorkStation == questions[i].AssignedWorkStation
)
) {
results.push(questions[i]);
this.setState({ amountOfWorkstations: results.length });
}
}
return results;
}
render() {
const { currentPage, todosPerPage } = this.state;
// Logic for displaying current todos
const indexOfLastTodo = currentPage * todosPerPage;
const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
const currentTodos = results.slice(indexOfFirstTodo, indexOfLastTodo);
debugger;
const renderTodos = currentTodos.map(r => {
return (
<>
<div className="jumbotron">
<button className="btn btn-primary" style={{ float: "right" }}>
View Details
</button>
<br />
<li>
<b>Workstation : </b>
{r.AssignedWorkStation}
</li>
<li>
<b>Date: </b>
{r.Date}
</li>
<li>
<b>Status: </b>
{r.CompleteToken}
</li>
<br />
{/* <Questions results={r}></Questions> */}
</div>
</>
);
});
const pageNumbers = [];
for (
let i = 1;
i <= Math.ceil(this.state.amountOfWorkstations / todosPerPage);
i++
) {
pageNumbers.push(i);
}
const renderPageNumbers = pageNumbers.map(number => {
return (
<button
className="btn btn-primary"
key={number}
id={number}
onClick={this.handleClick}
>
{number}
</button>
);
});
let selectedWorkStation = window.localStorage.getItem("Workstation");
console.log(this.state.questions);
if (this.state.questions.length) {
return (
<div>
<h2 style={{ textAlign: "center" }}>
Completed Workstation Assessments
</h2>
<ul>
<button disabled className="btn btn-secondary">
Workstation Assessments
</button>
<Link to="./admin-center">
<button className="btn btn-secondary">Edit Questions</button>
</Link>
<Link to="./admin-center-view-users">
<button className="btn btn-secondary">View Users</button>
</Link>
<DropdownButton
style={{ float: "right" }}
id="dropdown-basic-button"
title="Completed"
>
<Dropdown.Item>
{" "}
<Link to="admin-view-workstation-assessments-declined">
In Progress
</Link>
</Dropdown.Item>
</DropdownButton>{" "}
</ul>
<ul>
{renderTodos}{" "}
<div
style={{ userSelect: "none", cursor: "pointer" }}
id="page-numbers"
>
{renderPageNumbers}
</div>
</ul>
</div>
);
} else if (!this.state.questions.length) {
return (
<>
{" "}
<div>
<h3 style={{ textAlign: "center" }}></h3>
<ul>
<br />
<br />{" "}
<div>
<h6>
{" "}
<tr>
Desk Location Selected :{" "}
<u style={{ color: "grey" }}>{selectedWorkStation}</u>
</tr>
</h6>
</div>
<div className="jumbotron">
<li style={{ textAlign: "center" }}>
<b>no completed Workstation Self-Assessments</b>{" "}
</li>
</div>
</ul>
</div>
</>
);
}
}
}

You should save your todos inside your component state, not compute it inside render.
You shouldn't have a global variable called results either, store that inside your component state as well.
Here is a small example:
fetch(`/admin-completed-workstations`)
.then(recordset => recordset.json())
.then(results => {
this.setState({ questions: results.recordset });
console.log(this.state.questions);
// Here, inside getQuestionByUniqueDate you should store result using this.setState instead of having a global variable
// Then you can simply move the entire renderTodo function outside the render function of this component
this.state.questions &&
this.getQuestionByUniqueDate(this.state.questions);
});
LE: Here is a comprehensive article about fetching data in React.js apps:
https://www.robinwieruch.de/react-fetching-data (I recommend reading it)
LE2: You can assign both results and todos inside your componentDidMount
getQuestionByUniqueDate(questions) {
const currentResults = this.state.results ? [...this.state.results] : [];
for (var i = 0; i < questions.length; i++) {
if (
!currentResults.find(q => q.Date == questions[i].Date) ||
!currentResults.find(
q => q.AssignedWorkStation == questions[i].AssignedWorkStation
)
) {
currentResults.push(questions[i]);
}
}
return currentResults;
}
fetch(`/admin-completed-workstations`)
.then(recordset => recordset.json())
.then(res => {
const results = res.recordset &&
this.getQuestionByUniqueDate(res.recordset);
// Logic for displaying current todos
const indexOfLastTodo = currentPage * todosPerPage;
const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
const currentTodos = results.slice(indexOfFirstTodo, indexOfLastTodo);
this.setState({
questions: res.recordset,
results,
currentTodos,
amountOfWorkstations: results.length
});
});