Suppose I have a React class P, which renders two child classes, C1 and C2. C1 contains an input field. I’ll refer to this input field as Foo. My goal is to let C2 react to changes in Foo. I’ve come up with two solutions, but neither of them feels quite right. First solution: Assign … Read more
I’m using a data object as my props for a component in ReactJS. <Field data={data} /> I know its easy to validate the PropTypes object itself: propTypes: { data: React.PropTypes.object } But what if I want to validate the values inside? ie. data.id, data.title? props[propName]: React.PropTypes.number.required // etc… 4 Answers 4
I’m trying to hide my API Key for when I commit to github, and I’ve looked through the forum for guidance, especially the following post: How do I hide API key in create-react-app? I made the changes and restarted yarn. I’m not sure what I’m doing wrong––I added an .env file to the root of … Read more
I can’t seem to find how to update query params with react-router without using <Link/>. hashHistory.push(url) doesn’t seem to register query params, and it doesn’t seem like you can pass a query object or anything as a second argument. How do you change the url from /shop/Clothes/dresses to /shop/Clothes/dresses?color=blue in react-router without using <Link>? And … Read more
I am trying to import components from react-materialize as – import {Navbar, NavItem} from ‘react-materialize’; But when the webpack is compiling my .tsx it throws an error for the above as – ERROR in ./src/common/navbar.tsx (3,31): error TS7016: Could not find a declaration file for module ‘react-materi alize’. ‘D:\Private\Works\Typescript\QuickReact\node_modules\react-materialize\l ib\index.js’ implicitly has an ‘any’ type. … Read more
I’m trying to send GET request as second parameter but it doesn’t work while it does as url. This works, $_GET[‘naam’] returns test: export function saveScore(naam, score) { return function (dispatch) { axios.get(‘http://****.nl/****/gebruikerOpslaan.php?naam=test’) .then((response) => { dispatch({type: “SAVE_SCORE_SUCCESS”, payload: response.data}) }) .catch((err) => { dispatch({type: “SAVE_SCORE_FAILURE”, payload: err}) }) } }; But when I try … Read more
I want to build a chat system and automatically scroll to the bottom when entering the window and when new messages come in. How do you automatically scroll to the bottom of a container in React? 23 Answers 23
I am using create react app to bootstrap my app. I have added two .env files .env.development and .env.production in the root. My .env.development includes: API_URL=http://localhost:3000/api CALLBACK_URL=http://localhost:3005/callback When I run my app using react-scripts start and console out process.env it spits out { NODE_ENV: “development”, PUBLIC_URL: “” } I’ve tried different things, but its just … Read more
I have a notification component, and I have a timeout setting for it. After timeout I call this.setState({isTimeout:true}). What I want to do is if already timeout, I want just render nothing: render() { let finalClasses = “” + (this.state.classes || “”); if (isTimeout){ return (); // here has some syntax error } return (<div>{this.props.children}</div>); … Read more
Trying to get react-router (v4.0.0) and react-hot-loader (3.0.0-beta.6) to play nicely, but getting the following error in the browser console: Warning: React.createElement: type is invalid — expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in. index.js: … Read more
