JXGBoard logic function is running only once.

[rizwanaman5]

Hello all, I am using jsxgraph-react-js to create a math application, where random lines are generated based on a random number function, the line is plotted on the board and users are asked to choose the equation for the line.

The random number function is working fine. The Graph component is receiving new props with each render, but the the graph's logic function, which is responsible for drawing the line is running only once.

I have put a console.log inside the function, and it runs only once when the app is started for the first time, after that the graph never changes ( it never shows a new line ) even though the component is receiving new props.

here is the code for the Graph component.

`

function Graph(props) { const classes = useStyles(); const { graphPoints } = props console.log('from graph component', graphPoints)

const [m, setM] = useState(graphPoints.m)
const [cons, setCons] = useState(graphPoints.c)

useEffect(() => {
    setM(graphPoints.m)
    console.log('rerendered graph')
    setCons(graphPoints.c)
}, [graphPoints, props.start])

console.log(JXGBoard)

let logic = (brd) => {
    // brd.suspendUpdate()
    console.log('slope', m)
    brd.create('functiongraph',
        [
            function (x) { return ((x * m) + cons) },
        ],
        { strokeColor: '#aa2233', strokeWidth: 2 }
    )
}

return (
    <>
        {m && cons
            ? <Card className={classes.card} variant="outlined">
                <CardContent>
                    <JXGBoard
                        logic={(brd) => logic(brd)}
                        boardAttributes={{
                            axis: true,
                            boundingbox: [-20, 20, 20, -20],
                            showCopyright: false,
                            grid: true,
                            snapToGrid: true,
                            withLabel: true,
                        }}

                        style={{
                            width: '100%',
                            height: '600px'
                        }}
                    />
                </CardContent>
            </Card>
            : null}
    </>
);

}

export default Graph; `

[rizwanaman5]

I have since found a workaround for this problem. Providing the component with a key prop and then change the value of the key each time i want to change the graph causes react to unmount and re-mount the graph component forcing the graph to read the logic function again and re-render with new values. `

                <JXGBoard
                   key={newGraph}
                    logic={(brd) => logic(brd)}
                    boardAttributes={{
                        axis: true,
                        boundingbox: [-20, 20, 20, -20],
                        showCopyright: false,
                        grid: true,
                        snapToGrid: true,
                        withLabel: true,
                    }}

                    style={{
                        width: '100%',
                        height: '600px'
                    }}
                />`