reactjs

Installing create-react-app gives npm ERR! shasum check failed and npm ERR! Unexpected end of JSON input while parsing near ‘…mojOzGIEI2rg0m24Yb5Oq’

the error npm ERR! shasum check failed and npm ERR! Unexpected end of JSON input while parsing near’….’ ,   will be solved by switching npm reigistry from the list of given npm registry. List of Npm registry: https://registry.npmjs.org/ (Dfault One) http://r.cnpmjs.org/ https://registry.npm.taobao.org/ https://registry.nodejitsu.com/ http://registry.mirror.cqupt.edu.cn https://skimdb.npmjs.com/registry https://npm.open-registry.dev/ (https://open-registry.dev) To switch just type npm config set … Read more

React onClick and preventDefault() link refresh/redirect?

React events are actually Synthetic Events, not Native Events. As it is written here: Event delegation: React doesn’t actually attach event handlers to the nodes themselves. When React starts up, it starts listening for all events at the top level using a single event listener. When a component is mounted or unmounted, the event handlers … Read more

What does ‘Only a ReactOwner can have refs.’ mean?

This is FYI for people using react and redux-devtools who are getting OP’s message. Your structure looks like project client node_modules react redux-devtools node_modules react The code in client will require the first react module; that in redux-devtools will require the other react. The react module keeps state and assumes it has all the state. … Read more

Updating React state when state is an array of objects

Your update function would look like this updateItem(id, itemAttributes) { var index = this.state.items.findIndex(x=> x.id === id); if (index === -1) // handle error else this.setState({ items: [ …this.state.items.slice(0,index), Object.assign({}, this.state.items[index], itemAttributes), …this.state.items.slice(index+1) ] }); } And you use it like this this.updateItem(2, {someattr: ‘a new value’}); Gross right? You’re going to have a big … Read more

How do I access refs of a child component in the parent component

Recommended for React versions prior to 16.3 If it cannot be avoided the suggested pattern extracted from the React docs would be: import React, { Component } from ‘react’; const Child = ({ setRef }) => <input type=”text” ref={setRef} />; class Parent extends Component { constructor(props) { super(props); this.setRef = this.setRef.bind(this); } componentDidMount() { // … Read more