You can useuseRef hook which is available since v16.7.0-alpha. EDIT: You’re encouraged to use Hooks in production as of 16.8.0 release! Hooks enable you to maintain state and handle side effects in functional components. function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { // `current` points to the mounted text input … Read more
Use href=”/#” to replace href=”#” OR href=”javascript:;” OR href=”javascript:void(0);” It should remove the warnings.
If you’re just after console logging here’s what I’d do: export default class App extends Component { componentDidMount() { console.log(‘I was triggered during componentDidMount’) } render() { console.log(‘I was triggered during render’) return ( <div> I am the App component </div> ) } } Shouldn’t be any need for those packages just to do console … Read more
trevorsg, you need to pass the button properties: import * as React from ‘react’ type ButtonProps = React.HTMLProps<HTMLButtonElement> const FancyButton = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => ( <button type=”button” ref={ref} className=”FancyButton”> {props.children} </button> )) // You can now get a ref directly to the DOM button: const ref = React.createRef<HTMLButtonElement>() <FancyButton ref={ref}>Click me!</FancyButton> ADDED: In recent … Read more
You need to wrap your title and body in a container. That could be a div. If you use a fragment instead, you’ll have one less element in the dom. { this.state.loadingPage ? <span className=”sr-only”>Loading… Registered Devices</span> : <> {this.state.someBoolean ? <div>some title</div> : null } <div>body</div> </> } I would advise against nesting ternary … Read more
The React Native Button is very limited in what you can do, see; Button It does not have a style prop, and you don’t set text the “web-way” like <Button>txt</Button> but via the title property <Button title=”txt” /> If you want to have more control over the appearance you should use one of the TouchableXXXX’ … Read more
This happens because you put bracket of return on the next line. That might be a common mistake if you write js without semicolons and use a style where you put opened braces on the next line. Interpreter thinks that you return undefined and doesn’t check your next line. That’s the return operator thing
For JEST users if you use Jest for testing and this error happen just wrap your component with <BrowserRouter> describe(‘Test suits for MyComponentWithLink’, () => { it(‘should match with snapshot’, () => { const tree = renderer .create( <BrowserRouter> <MyComponentWithLink/> </BrowserRouter> ) .toJSON(); expect(tree).toMatchSnapshot(); }); });
In the end what did the trick was changing the file format from JavaScript to JavaScript React on the bottom toolbar. I’m publishing it here for future reference since I didn’t find any documentation on this topic. In addition to the above. If you click ‘Configure File Association for .js’ you can set all .js … Read more
Like this: function Component() { const style = { “–my-css-var”: 10 } as React.CSSProperties; return <div style={style}>…</div> } Or without the extra style variable: function Component() { return <div style={{ “–my-css-var”: 10 } as React.CSSProperties} /> }