score:-1
follow this article! and you will get better understanding of how to setstate.
i prefer to use the fat arrow function. try this out!
import react, { component } from 'react';
import styled from 'styled-components';
const btnbox = styled.ul`
display:flex;
width:50vw;
align-items:center;
justify-content:flex-start;
font-weight:900;
font-size:5vw;
letter-spacing:-0.5vw;
`;
const mybtn = styled.li`
width:30%;
font-size:5vw;
display:flex;
align-items:center;
justify-content:flex-start;
cursor:pointer;
`;
class signandlog extends component {
constructor(props) {
super(props);
this.state = { scolor: 'black', lcolor: 'grey' };
localstorage.setitem(' ', this.state.scolor);
}
choosefun =(e)=> {
const myname = e.target.dataset.name;
if (myname === 'sign') {
this.setstate({
scolor: 'black',
lcolor: 'grey'
});
localstorage.setitem('status', myname);
} else {
this.setstate({
scolor: 'grey',
lcolor: 'black'
});
localstorage.setitem('status', myname);
}
}
render() {
return (
<btnbox>
<mybtn onclick={(e)=>this.choosefun(e)} data-name="sign" style={{ color: this.state.scolor }}>註冊</mybtn>
<mybtn onclick={(e)=>this.choosefun(e)} data-name="log" style={{ color: this.state.lcolor }}>登入</mybtn>
</btnbox>
);
}
}
export default signandlog;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
Source: stackoverflow.com
Related Query
- React setState can only update a mounted or mounting component
- React setstate can only update a mounted or mounting component -- on rerender
- React: setState can only update a mounted or mounting component
- setState Can only update a mounted or mounting component
- setState Warning in child component. Warning: Can only update a mounted or mounting component
- setState update a mounted or mounting component
- Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component
- Reacr Router - setState(...): Can only update a mounted or mounting component
- React Warning: Can only update a mounted or mounting component
- ReactJs error - Warning: setState(...): Can only update a mounted or mounting component
- React - setState(...): Can only update a mounted or mounting component
- Getting React error: "setState(...): Can only update a mounted or mounting component" ONLY with Child Component
- Warning: setState(...): Can only update a mounted or mounting component on a new reactjs app
- Can only update a mounted or mounting component error. Conditional rendering
- Warning: Can only update a mounted or mounting component
- setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component
- React error: Can only update a mounted or mounting component
- React - setState(...) Can only update a mounted or mounting component
- React JS setState(...): Can only update a mounted or mounting component
- Warning.js:45 Warning: setState(...): Can only update a mounted or mounting component
- Warning react : setState(...): Can only update a mounted or mounting component
- setState(...) Can only update a mounted or mounting component
- setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op
- Can't call setState on a component that is not yet mounted
- Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate
- React JS - can't call setState on a component that is not yet mounted
- "setState(…): Can only update a mounted or mounting component" inside componentDidMount
- Component not mounted when setState called in arrow function in React with ES2016
- Set State in Ajax Call Back throws error: Warning: setState(...): Can only update a mounted or mounting
- Error "Maximum update depth exceeded. This can happen when a component calls setState inside useEffect"
More Query from same tag
- I am having issues Cannot read properties of undefined (reading 'some')
- can't update the node js version and npm version
- Instagram embed: React's JSX doesn't support namespace tags
- How to fix React 15.5.3 PropTypes deprecated warning while using react-transition-group
- csrf token missing axios to django rest framework
- React Hook Form using Controller, yup and Material UI - validation issue
- Callback to control modal display
- How to add onclick event to a string rendered by dangerouslysetInnerHtml in reactjs?
- React -> State Management
- React application router
- Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method
- search functionality in table without clicking enter button from keyboard
- Element implicitly has an 'any' type because expression of type 'any' can't be used to index type with createStyles
- How do I prevent double confirmation in chrome with 'onbeforeunload' events in react
- How to locally test set Cookies with the Same Origine Policy
- Fetching Data from API using UseEffect
- ReactJS - Detect third-party DOM insert using Mutation Observer
- Adding object values to useMemo hook for React
- Add Service Worker to Create React App Project
- The data passed via this.props.history.push has weird behavior in the target page
- How to change the collapse/expand icon to right side of TreeView of material?
- Can not get grade in API JSON
- Radium doesn't work with React Router IndexLink component
- How to connect socket.io clients using a loop
- Add img into react state for display in custom dropdown
- I'm trying to insert some HTML into jodit-react editor on my cursor position, it somehow inserts but not exactly at my cursor position
- Javascript - Question regarding Set Timeout
- Webpack and sass
- Get different shades of a custom material UI theme primary color?
- Firestore getDoc wont work when using pathSegments in react