Tag: reactjs

Looping elements in JSX React

In React.js documentation, I wonder how Array.map() is used in JSX React. in <ul> tag, why we just put the variable listItems directly?. Because I think it will return a single array instead of <li> elements like this : how does JSX treat an array? Did I have to loop listItems manually? Thank you in advance. Answer you might want

“cover” property bugging the background

I am having a problem with covering the background in CSS. Before: Image Before After: Image After Anyone know how to fix this? Thanks! Answer You cannot have cover alone in the background property. You are obliged to define the position as well: Or add background-size: cover Related: Error: CSS: background: / is an incorrect operator

React: Filter table data with multiple column values

I have the following an array object data. I wanted to filter it’s data when a user provide either title, category or published values from an input. I can only filter the data only with title value. How can I make it to category and published values as well? here is my code. ` Answer You can add “or” conditions

Controlled from in React

I’m new in react and I’m a bit confused about how React runs update on every new input’s keystroke, for exapmpe, this is the form and I want to update the state on every keystroke What I don’t understand here is the update cycle, my understanding is the following: As the input’s value is tied to react state, the initial

React conditional rendering based on other state doesn’t work

I’m new to react and I honestly can’t understand conditional rendering. I have one useState and one useReducer: Following tutorials, I made a calculator with currentOperand, previousOperand, Operation and every time the currentOperand is 10, I want trivia to be “something”. I honestly don’t understand, since I don’t get any errors. I tried this: and this but nothing appears. Not

Type json in React components

I have a dynamic json, for example: And I created interface for this: I have two components: But this return me error: Type “IResult” is not assignable to type ‘string’. in line: <SecondComponent result={result}> What I’m doing wrong? Answer When you pass arguments to a component, it is taken as props. By defining SecondComponent as function SecondComponent(result: IResult) {}, you

Why is my get request from a JSON online file won’t refresh at new render?

I’m doing the folloing request over a json file stored on an azure blob. I nested this function in a useEffect hook It’s working well as I can get the data and display it. My issue is that it’s never refreshing at page/component render. The only solution is to clear cache. How can I force the call to get fresh

I defined component and used it App.js but getting undefined error

When I try to access the relevant component under app.js, I get the error “WARNING in [eslint] rcApp.js Line 2:8: ‘personAdd’ is defined but never used no-unused-vars”. When I run the project, I see tags in the form of in html, but the component does not appear on the screen. I have included the codes below. Thanks in advance. Note

How to prevent mui datatables render when set states in onRowSelectionChange

I’m currently working on React js project with “mui-datatables”: “^4.2.2”. I have a list of data divided on pages with the possibility of selecting an item through a checkbox : My problem : when I select an item in the second page, the component rerender and automatically back to the first page. I think the problem is a set state