Choice-Example.md

Choice

ChoiceText is simple React component that allows the user to select a value from a list of choice via a pulldown behavior.

Props

The Choice component uses the following props:

1. name: A unique name for this field with corresponding name in the parent component's state example name="subject"
2. value: the state variable that holds the selected value example value={subject}
3. onChange: function in the parent component to catch/store state changes example onChange={handleChange}
4. choices: an array of Strings as pull down choices

Example

import { Choice } from 'simple-widgets';

const YourComponent = (props) => {

    const [exMode, setExMode] = useState('');

    const modes = ["java", "javascript", "jsx", "markdown", "sh"];

    return (
      <div>
        <Choice
          choices={modes}
          name="exMode"
          value={exMode}
          onChange={(event) => setExMode(event.target.value)}  />
      </div>
    )
}

export default YourComponent;

The choice that was selected by the user will be in the state variable exMode.

Versioning and Stability

We want Choice to be a stable dependency that’s easy to keep current. We take the same approach to versioning as React.js itself: React Versioning Scheme.

Thanks

To CPC project team where this was developed.