Skip to content

Tag: reactjs

Looping elements in JSX React

In React.js documentation, I wonder how 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