My development environment: react, recoil, javascript, styled-component.
When I click on the technology stack for each field classified as a tab, I want to change the CSS only when it is clicked and included in the selected Tags.
const [selectedTags, setSelectedTags] = useRecoilState(selectedTagsState);
const tabContArr = [
{
tabTitle: 'FE',
tabCont: ['JavaScript', 'TypeScript', 'React', 'Vue', 'Svelte', 'Nextjs'],
},
{
tabTitle: 'BE',
tabCont: [
'Java',
'Spring',
'Nodejs',
'Nextjs',
'Go',
'Kotlin',
'Express',
'MySQL',
'MongoDB',
'Python',
'Django',
'php',
'GraphQL',
'Firebase',
],
},
{
tabTitle: 'etc',
tabCont: [],
},
];
const onTagClick = (e) => {
const newSelectedTags = [...selectedTags];
const filterTarget = newSelectedTags.filter(
(el) => el.tagName === e.target.textContent,
);
if (filterTarget.length === 0 && newSelectedTags.length < 5) {
let tagObj = {};
tagObj.tagName = e.target.textContent;
newSelectedTags.push(tagObj);
setSelectedTags(newSelectedTags);
} else if (
filterTarget.length !== 0 ||
selectedTags.length >= 5
) {
{
(''); // nothing change
}
}
};
// FE, BE Choose
tabContArr[activeIdx].tabCont.map((skillTag, idx) => {
return (
<div
key={idx}
className={
// HERE!!!
selectedTags.includes(skillTag)
? 'skill-tag skill-selected-tag'
: 'skill-tag'
}
onClick={onTagClick}
aria-hidden="true"
>
{skillTag}
</div>
);
})
I tried to write the code like the one marked "HERE!!!" but it didn't work when I did this. Please help me on how to change the CSS (Class) only for the names in the selected Tag!!
className={
// HERE!!!
selectedTags.includes(skillTag)
? 'skill-tag skill-selected-tag'
: 'skill-tag'
}
In tabContArr[activeIdx].tabCont.map((skillTag, idx) => {, skillTag is a string, while selectedTags is an array of objects, like this: [{tagName: 'Java'}, {tagName: 'Spring'}, ...].
You are determining whether the array of objects contains a string, which will never occur. console.log(selectedTags, skillTag) will make it easier to understand.
Related
im trying to develop component that will sort new items, depending if item parent is or is not present on the list already. Components can be nested in each other to unlimited depth. Parent have list of children, children have parentId. Now, it works as expected at the first render, but when new item appear on the list (its added by user, using form, up in the structure), it does in fact make its way to components list, but is not shown on the screen until page reload. I can see temporary list that is used to make all calculations have the item as expected in the nested structure. Then i set state list to value of temp, but its not working, and i dont know why. Im quite new to react stuff. In act of desperation i even tried to destructure root parent of the item, hoping it will force rerender, but that didnt worked too. Anybody could help with this?
http://jsfiddle.net/zkfj03um/13/
import React, { useState } from 'react';
function Component(props) {
const [component, setComponent] = useState(props.component);
return (
<div>
{component.id};
{component.name};
<ul>
{component.subcomps && component.subcomps.map((comp) =>
<li key={comp.id} style={{ textAlign: 'left' }}>
<Component component={comp}
id={comp.id}
name={comp.name}
parentId={comp.parentId}
subcomps={comp.subcomps}
/>
</li>)}
</ul>
</div>
);
}
function ComponentsList(props) {
const newComponents = props.newComponents;
const [filteredComponents, setFilteredComponents] = useState();
function deepSearch(collection, key, value, path=[]) {
for (const o of collection) {
for (const [k, v] of Object.entries(o)) {
if (k === key && v === value) {
return {path: path.concat(o), object: o};
}
if (Array.isArray(v)) {
const _o = deepSearch(v, key, value, path.concat(o));
if (_o) {
return _o;
}
}
}
}
}
async function filter() {
let temp = [];
await newComponents.forEach((comp) => {
//parent may be, or may not be on the list. Its not necesary
const parentTuple = deepSearch(filteredComponents, 'id', comp.parentId);
if (!parentTuple) {
//create parent substitute logic
} else {
const parent = parentTuple.object;
const root = parentTuple.path[0];
const mutReplies = [comm, ...parent.replies];
parent.replies = mutReplies;
temp = [{...root}, ...temp]
}
})
setFilteredComponents([...temp])
}
useEffect(() => {
setLoading(false);
}, [filteredComponents]);
useEffect(() => {
setLoading(true);
filter();
}, [newComponents]);
return (<>
{!loading && filteredComponents.map((component, index) =>
<li key={index}>
<Component component={component} />
</li>
)}
</>);
}
const items = [
{ id: 1, name: 'sample1', subcomps: [{ id: 5, name: 'subcomp1', parentId: 1, subcomps: [] }] },
{
id: 2, name: 'sample2', subcomps: [
{ id: 6, name: 'subcomp2', subcomps: [], parentId: 2 },
{ id: 7, name: 'subcomp3', subcomps: [], parentId: 2 }
]
},
]
ReactDOM.render(<ComponentsList newComponents={items} />, document.querySelector("#app"))
I want to display by default only data where the status are Pending and Not started. For now, all data are displayed in my Table with
these status: Good,Pending, Not started (see the picture).
But I also want to have the possibility to see the Good status either by creating next to the Apply button a toggle switch : Show good menus, ( I've made a function Toggle.jsx), which will offer the possibility to see all status included Good.
I really don't know how to do that, here what I have now :
export default function MenuDisplay() {
const { menuId } = useParams();
const [selected, setSelected] = useState({});
const [hidden, setHidden] = useState({});
const [menus, setMenus] = useState([]);
useEffect(() => {
axios.post(url,{menuId:parseInt(menuId)})
.then(res => {
console.log(res)
setMenus(res.data.menus)
})
.catch(err => {
console.log(err)
})
}, [menuId]);
// If any row is selected, the button should be in the Apply state
// else it should be in the Cancel state
const buttonMode = Object.values(selected).some((isSelected) => isSelected)
? "apply"
: "cancel";
const rowSelectHandler = (id) => (checked) => {
setSelected((selected) => ({
...selected,
[id]: checked
}));
};
const handleClick = () => {
if (buttonMode === "apply") {
// Hide currently selected items
const currentlySelected = {};
Object.entries(selected).forEach(([id, isSelected]) => {
if (isSelected) {
currentlySelected[id] = isSelected;
}
});
setHidden({ ...hidden, ...currentlySelected });
// Clear all selection
const newSelected = {};
Object.keys(selected).forEach((id) => {
newSelected[id] = false;
});
setSelected(newSelected);
} else {
// Select all currently hidden items
const currentlyHidden = {};
Object.entries(hidden).forEach(([id, isHidden]) => {
if (isHidden) {
currentlyHidden[id] = isHidden;
}
});
setSelected({ ...selected, ...currentlyHidden });
// Clear all hidden items
const newHidden = {};
Object.keys(hidden).forEach((id) => {
newHidden[id] = false;
});
setHidden(newHidden);
}
};
const matchData = (
menus.filter(({ _id }) => {
return !hidden[_id];
});
const getRowProps = (row) => {
return {
style: {
backgroundColor: selected[row.values.id] ? "lightgrey" : "white"
}
};
};
const data = [
{
Header: "id",
accessor: (row) => row._id
},
{
Header: "Name",
accessor: (row) => (
<Link to={{ pathname: `/menu/${menuId}/${row._id}` }}>{row.name}</Link>
)
},
{
Header: "Description",
//check current row is in hidden rows or not
accessor: (row) => row.description
},
{
Header: "Status",
accessor: (row) => row.status
},
{
Header: "Dishes",
//check current row is in hidden rows or not
accessor: (row) => row.dishes,
id: "dishes",
Cell: ({ value }) => value && Object.values(value[0]).join(", ")
},
{
Header: "Show",
accessor: (row) => (
<Toggle
value={selected[row._id]}
onChange={rowSelectHandler(row._id)}
/>
)
}
];
const initialState = {
sortBy: [
{ desc: false, id: "id" },
{ desc: false, id: "description" }
],
hiddenColumns: ["dishes", "id"]
};
return (
<div>
<button type="button" onClick={handleClick}>
{buttonMode === "cancel" ? "Cancel" : "Apply"}
</button>
<Table
data={matchData}
columns={data}
initialState={initialState}
withCellBorder
withRowBorder
withSorting
withPagination
rowProps={getRowProps}
/>
</div>
);
}
Here my json from my api for menuId:1:
[
{
"menuId": 1,
"_id": "123ml66",
"name": "Pea Soup",
"description": "Creamy pea soup topped with melted cheese and sourdough croutons.",
"dishes": [
{
"meat": "N/A",
"vegetables": "pea"
}
],
"taste": "Good",
"comments": "3/4",
"price": "Low",
"availability": 0,
"trust": 1,
"status": "Pending",
"apply": 1
},
//...other data
]
Here my CodeSandbox
Here a picture to get the idea:
Here's the second solution I proposed in the comment:
// Setting up toggle button state
const [showGood, setShowGood] = useState(false);
const [menus, setMenus] = useState([]);
// Simulate fetch data from API
useEffect(() => {
async function fetchData() {
// After fetching data with axios or fetch api
// We process the data
const goodMenus = dataFromAPI.filter((i) => i.taste === "Good");
const restOfMenus = dataFromAPI.filter((i) => i.taste !== "Good");
// Combine two arrays into one using spread operator
// Put the good ones to the front of the array
setMenus([...goodMenus, ...restOfMenus]);
}
fetchData();
}, []);
return (
<div>
// Create a checkbox (you can change it to a toggle button)
<input type="checkbox" onChange={() => setShowGood(!showGood)} />
// Conditionally pass in menu data based on the value of toggle button "showGood"
<Table
data={showGood ? menus : menus.filter((i) => i.taste !== "Good")}
/>
</div>
);
On ternary operator and filter function:
showGood ? menus : menus.filter((i) => i.taste !== "Good")
If button is checked, then showGood's value is true, and all data is passed down to the table, but the good ones will be displayed first, since we have processed it right after the data is fetched, otherwise, the menus that doesn't have good status is shown to the UI.
See sandbox for the simple demo.
I am using react quill as rich text editor and I have used quill mention for adding hashtags and people mention in editor. I have went through the docs of quill mention but there is no example for adding links to inserted "hashtag" or "mention".
There is prop, "linkTarget" for adding link but there is no example for addition of link to hashtag and mention.
Hashvalues and atvalues from database:
hashvalues:[{
id:1,
value:"newHashtag"
}]
atvalues:[{
id:1,
value:"Jhon"
}]
So my expected output is:
for hashtag:
<a href:`/#/hashtags/${id}`>#{value}</a>
for people mention:
<a href:`/#/people/${id}`>#{value}</a>
Here's my code for text editor and mention module:
import React, { useEffect, useState } from "react";
import ReactQuill, { Quill } from "react-quill";
import * as Emoji from "quill-emoji";
import "react-quill/dist/quill.snow.css";
import "quill-emoji/dist/quill-emoji.css";
import "quill-mention/dist/quill.mention.css";
import "quill-mention";
//Add https to link if https is not present
const Link = Quill.import("formats/link");
Link.sanitize = function (url) {
// quill by default creates relative links if scheme is missing.
if (!url.startsWith("http://") && !url.startsWith("https://")) {
return `http://${url}`;
}
return url;
};
Quill.register(Link, true);
Quill.register("modules/emoji", Emoji);
// Add sizes to whitelist and register them
const Size = Quill.import("formats/size");
Size.whitelist = ["extra-small", "small", "medium", "large"];
Quill.register(Size, true);
// Add fonts to whitelist and register them
const Font = Quill.import("formats/font");
Font.whitelist = [
"arial",
"comic-sans",
"courier-new",
"georgia",
"helvetica",
"lucida",
];
Quill.register(Font, true);
let atValues = [];
let hashValues = [];
const mention = {
allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
mentionDenotationChars: ["#", "#"],
linkTarget:"https://www.google.com",
source: function (searchTerm, renderList, mentionChar, ) {
let values;
if (mentionChar === "#") {
values = atValues;
} else {
values = hashValues;
}
if (searchTerm.length === 0) {
renderList(values, searchTerm);
} else {
const matches = [];
for (let i = 0; i < values.length; i++)
if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase()))
matches.push(values[i]);
renderList(matches, searchTerm);
}
},
};
function Editor(props) {
const [editorHtml, setEditorHtml] = useState("");
const handleChange = (html) => {
setEditorHtml(html);
props.changeHandler(html);
};
useEffect(() => {
if (props.value) {
setEditorHtml(props.value);
} else {
setEditorHtml("");
}
if(props.values){
let hash=props.values
hash.map((v) => {
v["value"] = v["display"]
})
hashValues=hash
}
if(props.people){
let peoples = props.people
peoples.map((v) => {
v["value"] = v["display"]
})
atValues=peoples
}
}, [props.value]);
return (
<div>
<ReactQuill
onChange={handleChange}
value={editorHtml}
modules={modules}
formats={formats}
bounds={".app"}
placeholder={props.placeholder}
/>
</div>
);
}
const modules = {
toolbar: [
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ list: "ordered" }, { list: "bullet" }],
["bold", "italic", "underline"],
[{ color: [] }, { background: [] }],
// [{ script: 'sub' }, { script: 'super' }],
[{ align: [] }],
["link", "blockquote", "emoji"],
["clean"],
],
clipboard: {
// toggle to add extra line breaks when pasting HTML:
matchVisual: false,
},
mention,
"emoji-toolbar": true,
"emoji-textarea": false,
"emoji-shortname": true,
};
const formats = [
"header",
"font",
"size",
"bold",
"italic",
"underline",
"strike",
"blockquote",
"list",
"bullet",
"indent",
"link",
"mention",
"emoji",
];
export default function EMTextArea({
placeHolder,
name,
value,
changeHandler,
hash,
peopleMention
}) {
return (
<div className="custom-toolbar-example">
<Editor
placeholder={placeHolder}
name={name}
value={value}
changeHandler={changeHandler}
values={hash}
people={peopleMention}
/>
</div>
);
}
How can I achieve this?
Thank You!
I solved it, I had to add "link" key in atvalues and hashvalues array of objects.
New hashvalues:
hashvalues:[{
id:1,
value:"hashtag",
link:"/#/users/hashtags/1"}]
And in mention module:
const mention = {
allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
mentionDenotationChars: ["#", "#"],
linkTarget: '_self',
source: function (searchTerm, renderList, mentionChar, ) {
let values;
if (mentionChar === "#") {
values = atValues;
} else {
values = hashValues;
}
if (searchTerm.length === 0) {
renderList(values, searchTerm);
} else {
const matches = [];
for (let i = 0; i < values.length; i++)
if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase()))
matches.push(values[i]);
renderList(matches, searchTerm);
}
},
};
Thanks, anyway.
I am experiencing this error with react dnd. The weird thing is that it depends on the key i specify to my react component. if i specify index, one part of my function fires this error, and when i specify item.id, another part doesnt fire. it doesnt make sense. please help.
When I specify the key to be index, the error fires when forum has no parent. however when i specify the key to be forum._id, the error fires when forum has parent. i dont know what to do, please help :)
Please visit this sandbox to reproduce:
https://codesandbox.io/s/proud-wind-hklt6
To reproduce:
Drag item 1ba on top of item 1, and then drag the item 1ba down the path.
Forum.jsx
const Forum = ({ forum, forums, setForums, move, find }) => {
const [{ isOver, canDrop }, drop] = useDrop({
accept: "forum",
hover: throttle((item, monitor) => {
if (item._id === forum._id) {
return;
}
if (!monitor.isOver({ shallow: true })) {
return;
}
if (!canDrop) return;
move(item, forum, forum.parent);
item = forum;
}, 200),
collect: (monitor) => ({
isOver: monitor.isOver(),
canDrop: monitor.canDrop(),
}),
});
const [, drag, preview] = useDrag({
item: {
_id: forum._id,
title: forum.title,
type: "forum",
children: forum.children,
parent: forum.parent,
},
isDragging(props, monitor) {
return props._id == monitor.getItem()._id;
},
});
const getChildren = async (forumId) => {
const _forums = await ForumService.getChildren(forumId, forums);
setForums(_forums);
};
return (
<Wrapper ref={drop}>
<ForumContainer ref={drag}>
{!!forum.childrenIds?.length && (
<div>
{!forum.isOpen ? (
<ForumChevron
className="fas fa-chevron-down"
onClick={() => getChildren(forum._id)}
></ForumChevron>
) : (
<ForumChevron
className="fas fa-chevron-up"
onClick={() =>
setForums(ForumService.resetChildren(forum._id, forums))
}
></ForumChevron>
)}
</div>
)}
<ForumTitle>{forum.title}</ForumTitle>
</ForumContainer>
{forum.children && !!forum.children.length && (
<ForumChildrenWrapper>
{forum.children.map((child, index) => (
<Forum
forum={child}
setForums={setForums}
forums={forums}
key={index}
move={move}
find={find}
/>
))}
</ForumChildrenWrapper>
)}
</Wrapper>
);
};
export default Forum;
ForumManager.jsx
if (!item.parent) {
console.log("here 1");
const dest = findItem(afterItem._id, _forums);
if (!dest.children) dest.children = [];
foundItem.parent = afterItem._id;
const idx = _forums.findIndex((f) => f._id === item._id);
_forums.splice(idx, 1);
if (dest.parent === foundItem._id) {
dest.parent = "";
if (foundItem.children.length) {
// When key is item.id, error shows up here
console.log("parent & has children");
for (let child of [...foundItem.children]) {
if (child._id === dest._id) {
child.children.splice(0, 0, {
...foundItem,
children: [],
childrenIds: [],
});
}
_forums.push(child);
}
} else {
console.log("no children");
dest.children.unshift({
...foundItem,
children: [],
childrenIds: [],
});
}
} else {
// When key is index, error shows up here
console.log("no parent");
console.log(dest);
dest.parent = "";
dest.children.splice(0, 0, {
...foundItem,
children: [],
childrenIds: [],
});
}
}
Try adding debounce to the hover handler (with trailing option). The components are updating too quickly by setting the state before DnD could catch up, and the target ID had changed by the time the user dropped the item.
Also - don't use index as the key, as it will change each time.
If you remove monitor.canDrop() inside collect function, then it works. Not sure, but this is one way.
I have an array like below
[
1:false,
9:false,
15:false,
19:false,
20:true,
21:true
]
on click i have to change the value of specific index in an array.
To update value code is below.
OpenDropDown(num){
var tempToggle;
if ( this.state.isOpen[num] === false) {
tempToggle = true;
} else {
tempToggle = false;
}
const isOpenTemp = {...this.state.isOpen};
isOpenTemp[num] = tempToggle;
this.setState({isOpen:isOpenTemp}, function(){
console.log(this.state.isOpen);
});
}
but when i console an array it still shows old value, i have tried many cases but unable to debug.
This is working solution,
import React, { Component } from "react";
class Stack extends Component {
state = {
arr: [
{ id: "1", value: false },
{ id: "2", value: false },
{ id: "9", value: false },
{ id: "20", value: true },
{ id: "21", value: true }
]
};
OpenDropDown = event => {
let num = event.target.value;
const isOpenTemp = [...this.state.arr];
isOpenTemp.map(item => {
if (item.id === num) item.value = !item.value;
});
console.log(isOpenTemp);
this.setState({ arr: isOpenTemp });
};
render() {
let arr = this.state.arr;
return (
<React.Fragment>
<select onChange={this.OpenDropDown}>
{arr.map(item => (
<option value={item.id}>{item.id}</option>
))}
</select>
</React.Fragment>
);
}
}
export default Stack;
i hope it helps!
The problem is your array has several empty value. And functions like map, forEach will not loop through these items, then the index will not right.
You should format the isOpen before setState. Remove the empty value
const formattedIsOpen = this.state.isOpen.filter(e => e)
this.setState({isOpen: formattedIsOpen})
Or use Spread_syntax if you want to render all the empty item
[...this.state.isOpen].map(e => <div>{Your code here}</div>)