Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Passing in a useState function into segmented control

$
0
0

I'd like to use this segmented control library to change the axis of the victory-native bar charts library. In this case, I want to use useState to change the value of the state and make it so that everytime the user picks an option on the segmented control, the axis changes corresponding to what the user picked. How can I use setValue to update the render when the axis changes? The end result should look somewhat like this: https://formidable.com/open-source/victory/docs/common-props/

DataScreen.tsx

<SegmentedControl        style={styles.control}        values={["D", "W", "M", "Y"]}        selectedIndex={2}        onChange={(event) => {          useState(//???);        }}      /><Graph />

Graph.tsx

function Graph(props) {  const [value, setValue] = useState([]);  return (<View style={styles.container}><VictoryChart width={400} theme={VictoryTheme.material}><VictoryAxis tickFormat={value} /><VictoryBar          alignment="start"          cornerRadius={{ top: 3 }}          style={{ data: { fill: "orange", width: 25 } }}          animate={{            duration: 1000,            onLoad: { duration: 1000 },          }}          data={[            { x: "Sun", y: countyCases },            { x: "Mon", y: 25 },            { x: "Tue", y: 40 },            { x: "Wed", y: 50 },            { x: "Thu", y: 50 },            { x: "Fri", y: 50 },            { x: "Sat", y: 50 },          ]}        /></VictoryChart></View>  );}function Week() {  return (<VictoryAxis      tickValues={["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]}    />  );}const Month = () => {<VictoryAxis tickValues={[4, 11, 18, 25, 2]} />;};const Year = () => {<VictoryAxis    tickValues={["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"]}  />;};

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>