import * as react from 'react' usestate code example
Example 1: import usestate
import React, { useState } from 'react';
Example 2: state with react functions
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Example 3: simple usestate example
// First: import useState. It's a named export from 'react'
// Or we could skip this step, and write React.useState
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
// This component expects 2 props:
// text - the text to display
// maxLength - how many characters to show before "read more"
function LessText({ text, maxLength }) {
// Create a piece of state, and initialize it to `true`
// `hidden` will hold the current value of the state,
// and `setHidden` will let us change it
const [hidden, setHidden] = useState(true);
// If the text is short enough, just render it
if (text.length <= maxLength) {
return <span>{text}</span>;
}
// Render the text (shortened or full-length) followed by
// a link to expand/collapse it.
// When a link is clicked, update the value of `hidden`,
// which will trigger a re-render
return (
<span>
{hidden ? `${text.substr(0, maxLength).trim()} ...` : text}
{hidden ? (
<a onClick={() => setHidden(false)}> read more</a>
) : (
<a onClick={() => setHidden(true)}> read less</a>
)}
</span>
);
}
ReactDOM.render(
<LessText
text={`Focused, hard work is the real key
to success. Keep your eyes on the goal,
and just keep taking the next step
towards completing it.`}
maxLength={35}
/>,
document.querySelector('#root')
);