score:2
this is a tricky problem more related to your usage of the styled-components library with react than your react code itself. in the render of your textarea1
you are creating a styledtextarea
with a style prop passed in. unfortunately this prop is ignored by components created with styled-components.
when using styled-components with react you are supposed to pull your props out and apply them to your css, as shown in this code-pen:
const styled = styled.default;
const button = styled.button`
background: red;
border-radius: 8px;
color: white;
height: ${props => props.small ? 40 : 60}px;
width: ${props => props.small ? 60 : 120}px;
`;
class application extends react.component {
render() {
return (
<div>
<button small>click me</button>
<button large>click me</button>
</div>
)
}
}
reactdom.render(<application />, document.getelementbyid('content'));
to fix your problem you will have to pull your style.height prop out in your styledtextarea
and reset your height to ''
at the end of textarea2.onchange. here is your code with these changes. note that this breaks the resizing done in textarea1:
const styled = styled.default;
const styledtextarea = styled.textarea`
display: block;
font-family: pt sans;
font-size: 20px;
line-height: 40px;
min-height: 120px;
overflow: hidden;
padding: 0 7px;
margin: 0 0 30px;
resize: none;
width: 500px;
// one update here
height: ${props => (props.style && props.style.height) ? props.style.height + 'px' : '0px'};
`;
const label = styled.span`
color: ${props => props.green ? '#00bb00' : 'red'};
font-size: 1.5em;
`;
const app = () => {
return(
<div>
<label green>✅ textarea1 - working </label>
<textarea1 />
<label>❌ textarea2 - not working </label>
<textarea2 />
</div>
)
}
class textarea1 extends react.component {
constructor(props) {
super(props);
this.state = {
value: 'lorem ipsum dolor sit amet, consectetur adipisicing elit. assumenda voluptas deleniti at, molestias in amet dolore voluptatem atque, modi minus ipsam dignissimos...',
scrollheight: 0,
}
}
onchange(e) {
const t = e.target;
t.style.height = 'auto';
t.style.height = `${t.scrollheight}px`;
this.setstate({value: t.value});
}
render() {
return (
<styledtextarea
value={this.state.value}
onchange={this.onchange.bind(this)}
/>
);
}
}
class textarea2 extends react.component {
constructor(props) {
super(props);
this.state = {
value: 'lorem ipsum dolor sit amet, consectetur adipisicing elit. assumenda voluptas deleniti at, molestias in amet dolore voluptatem atque, modi minus ipsam dignissimos...',
scrollheight: 0,
}
}
onchange(e) {
const bugger = e.target;
console.log('style.height before it is set to auto: ', bugger.style.height)
bugger.style.height = 'auto';
console.log('style.height after it is set to auto (obviously): ', bugger.style.height)
console.log('.scroll height: ', bugger.scrollheight);
this.setstate({
scrollheight: bugger.scrollheight,
value: bugger.value
});
// another update here
bugger.style.height = '';
}
render() {
console.log(this.state.scrollheight);
return (
<styledtextarea
style={{height: this.state.scrollheight}}
value={this.state.value}
onchange={this.onchange.bind(this)}
/>
);
}
}
reactdom.render(<app />, document.getelementbyid('root'));
a final note, the second approach you are using is definitely the more preferable one! modifying your components styles via a handler as opposed to the render method is not ideal.
Source: stackoverflow.com
Related Query
- React component (textarea) won't re-render with new style from updated state
- How can I make react render the new state modifications after I have updated the state with hooks and context
- How to conditionally render in a react component with state updated in useEffect?
- Can't get React component to re-render after state has been updated with returned data from Parse Server
- Updating Parent Component State from Child Component with UseState React Hook
- Laravel 5.5 render a React component in a blade view with data from the controller
- onEnter Transitions with React Router and Redux Simple Router Dont Render New Route's Component
- Watching state from child component React with Material UI
- How to pass input values from a child Form component to the state of its parent component for submission with react hooks?
- Setting and updating state in React JS with Dropdown component from Material UI
- How to call event from component after setting its state with React hooks?
- Track that state is updated outside of a component with promise Hooks React JS
- react component not render new data from redux store
- React — have active item state stay with menu component when loaded into new page
- trying to render same react component with dynamic props (the props come from a json file)
- React - state not getting updated after a prop being sent from another component
- React Component not showing updated state changes from custom Hook
- React js setting the state of a parent component from child Render method
- React Child component not sent the updated state from parent
- How to set state of a react component with a specific item from a returned json object?
- React component not refreshing when redux state has been updated with successful action
- Set state of parent with react Router from Route component
- react wait for component to get state from store then render child
- Map function won't render new element when state is updated React JS
- React Hooks: conditionally render a component but with access to the whole state
- How to properly pass an array from a parent React class component state to a child component written with hooks?
- How to set the state of a component with the information obtained from a promise to avoid memory leaks in react
- How to render a React component multiple times but each time with an updated State?
- How to render React Component with data from Redux store
- How to render component again at the top level with the new props in React 0.14
More Query from same tag
- React js, What is the best way to store redux state into local state?
- How to convert create-react-app to Preact?
- setState inside constructor not working properly: ReactJS
- Multiple child routes in React-router
- Unable to read map property of an array
- How to pass style in svg tag in React?
- Initiate function/event from child to parent
- multi tabbed javascript application with URL support using ReactJS
- How can you use the @supports css rule in material ui makeStyles?
- Update a component list after deleting record
- Unable to load a react module as node module
- Problem using GatsbyImage of gatsby-plugin-image with array
- reactJS - How to concatenate within props?
- How to configure Material-UI Autocomplete with secondaryText on dynamic data
- Aranging cards in react js
- How to create input field dynamically in ReactJS?
- How to clear selected tab indicator when route changes to non-tab path
- Nested React Router Component Won't Render on New Page
- Uncaught TypeError: Cannot destructure property 'name' of 'response.profileObj' as it is undefined
- How to draw line graph by user input?
- React router v4 - route with params renders blank page?
- Can anyone tell me why this setinterval keeps getting shorter and short
- Get attribute value from same element method in React
- Denial of Service - http proxy - React
- How to trigger onClose for react ui Menu with react-testing-libray?
- React: Is it possible to prevent state update after unmount, via setting this.setState to empty function?
- how to wait redux action to completely dispatched before dispatching another action?
- Issues setting date
- Google Api redirection with passport
- Passing parameters to actions in redux (Warning: setState(...): Cannot update during an existing)