Categories
Development React

Why pass functions as children in React component?

I’m new to React, still struggling in understanding the design of React component. I saw some code as below: export const ProModeContext = React.createContext(); export class XXX extends Component { … render() { return <ProModeContext.Consumer> { contextData => {xxx } </ProModeContext.Consumer> } } and the pattern is <Abc> { param => {xxx} // let’s say […]

Categories
Development

how to make the list of conversation to work efficiently?

I’m new to react, have created a chat using reactjs. I’m using “POST” request through fetch to post new message for a particular conversation. My Objective is when i send a message, then it should clear the input but unable to clear the input after sending message. Anyone can help me in this? “How to […]

Categories
Development

Delay in for loop for Simon game

Im new to React, less than a month so i know im probably not using best practices,but im trying to build this Simon Says game, but im stuck trying to put delay in between each of my for loops, they run at the same time. Ive looked at other solutions for this but they dont […]

Categories
Development

same action type for combined reducers

I’m new to React, just a question on Reducers. Below is some example code from a book: export default createStore(combineReducers( { modelData: ReducerOne, stateData: ReducerTwo })); And the book says: Each reducer operates on a separate part of the data store, but when an action is processed, each reducer is passed the action until one […]

Categories
Development React

Cannot render my array in React: getting an error “Expected an assignment or function call and instead saw an expression”

I’m new to react, and having a lot of trouble understanding why this code doesn’t work. All I am trying to do is create a list of 5 0’s and render them as list elements in my render method, but I’m getting this error. import React, { Component } from “react”; class Matrix extends Component […]

Categories
Development React

Cannot render my array in React: getting an error “Expected an assignment or function call and instead saw an expression”

I’m new to react, and having a lot of trouble understanding why this code doesn’t work. All I am trying to do is create a list of 5 0’s and render them as list elements in my render method, but I’m getting this error. import React, { Component } from “react”; class Matrix extends Component […]

Categories
Development React

React isn’t finding a module even though I set the path correctly

I’m new to react, so I apologize for the noobness of this question. I just created a new React application, and I’ve been playing around with the folder structure. Below is my current folder structure: react-app |_ src |_ assets |_ images |_ logo |_ logo.svg |_ components |_ App |_ App.js index.js In /react-app/src/components/App/App.js, […]

Categories
Development

why I don’t need to import related modules?

I’m new to React, sorry if my questions sound dumb. I’m using npx create-react-app to create React app. But I don’t know what’s going on behind the scenes: Q1-If I throw an error in a component like: import React, { Component } from “react”; … render() { throw new Error(“something went wrong”); } I didn’t […]

Categories
Development

Unmounted components still being rendered first

I’m new to React, just a question on componentWillUnmount() and render() lifecycle method. Below is some code: … export default class App extends Component { constructor(props) { super(props); this.state = { showMessage: true } } handleChange = () => { this.setState({ showMessage: !this.state.showMessage }); } render(){ <div> <input type=”checkbox” checked={ this.state.showMessage } onChange={ this.handleChange } […]

Categories
Development

How to display values of the 2 inputs in the above field?

I’m new to react, and i’ve gone through this link “reactjs – Dropdown select with 2 fields” here my objective is i have to get the min value and max value in the rate range field. Instead of tag i’ve used input tag, in order to get the min and Max values. I’m trying to […]