reactjs – Page 337 – Tarik Billa

React this.setState is not a function

September 24, 2022 by Tarik

The callback is made in a different context. You need to bind to this in order to have access inside the callback: VK.api(‘users.get’,{fields: ‘photo_50’},function(data){ if(data.response){ this.setState({ //the error happens here FirstName: data.response[0].first_name }); console.info(this.state.FirstName); } }.bind(this)); EDIT: Looks like you have to bind both the init and api calls: VK.init(function(){ console.info(“API initialisation successful”); VK.api(‘users.get’,{fields: ‘photo_50’},function(data){ … Read more

How can I communicate between related react components?

September 24, 2022 by Tarik

The best approach would depend on how you plan to arrange those components. A few example scenarios that come to mind right now: <Filters /> is a child component of <List /> Both <Filters /> and <List /> are children of a parent component <Filters /> and <List /> live in separate root components entirely. … Read more

React Router v4 – How to get current route?

September 24, 2022 by Tarik

In the 5.1 release of react-router there is a hook called useLocation, which returns the current location object. This might useful any time you need to know the current URL. import { useLocation } from ‘react-router-dom’ function HeaderView() { const location = useLocation(); console.log(location.pathname); return <span>Path : {location.pathname}</span> }

Nested routes with react router v4 / v5

September 24, 2022 by Tarik

In react-router-v4 you don’t nest <Routes />. Instead, you put them inside another <Component />. For instance <Route path=”/topics” component={Topics}> <Route path=”/topics/:topicId” component={Topic} /> </Route> should become <Route path=”/topics” component={Topics} /> with const Topics = ({ match }) => ( <div> <h2>Topics</h2> <Link to={`${match.url}/exampleTopicId`}> Example topic </Link> <Route path={`${match.path}/:topicId`} component={Topic}/> </div> ) Here is a … Read more

Typescript input onchange event.target.value

September 24, 2022 by Tarik

Generally event handlers should use e.currentTarget.value, e.g.: onChange = (e: React.FormEvent<HTMLInputElement>) => { const newValue = e.currentTarget.value; } You can read why it so here (Revert “Make SyntheticEvent.target generic, not SyntheticEvent.currentTarget.”). UPD: As mentioned by @roger-gusmao ChangeEvent more suitable for typing form events. onChange = (e: React.ChangeEvent<HTMLInputElement>)=> { const newValue = e.target.value; }

react-router – pass props to handler component

September 23, 2022 by Tarik

If you’d rather not write wrappers, I guess you could do this: class Index extends React.Component { constructor(props) { super(props); } render() { return ( <h1> Index – {this.props.route.foo} </h1> ); } } var routes = ( <Route path=”https://stackoverflow.com/” foo=”bar” component={Index}/> );

Trying to use fetch and pass in mode: no-cors

September 23, 2022 by Tarik

mode: ‘no-cors’ won’t magically make things work. In fact it makes things worse, because one effect it has is to tell browsers, “Block my frontend JavaScript code from seeing contents of the response body and headers under all circumstances.” Of course you never want that. What happens with cross-origin requests from frontend JavaScript is that … Read more

How to pass data from child component to its parent in ReactJS?

September 23, 2022 by Tarik

This should work. While sending the prop back you are sending that as an object rather send that as a value or alternatively use it as an object in the parent component. Secondly you need to format your json object to contain name value pairs and use valueField and textField attribute of DropdownList Short Answer … Read more

How to pass params with history.push/Link/Redirect in react-router v4?

September 23, 2022 by Tarik

First of all, you need not do var r = this; as this in if statement refers to the context of the callback itself which since you are using arrow function refers to the React component context. According to the docs: history objects typically have the following properties and methods: length – (number) The number … Read more

ReactJs: What should the PropTypes be for this.props.children?

September 23, 2022 by Tarik

Try something like this utilizing oneOfType or PropTypes.node import PropTypes from ‘prop-types’ … static propTypes = { children: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.node), PropTypes.node ]).isRequired } or static propTypes = { children: PropTypes.node.isRequired, }