How to get new value from react ace editor on button click

Question

I'm trying to alert the final value of the ace editor when a button is clicked. I know there's an onChange event for Ace Editor, just not sure on how to get that value into my handleClick function.

This is my current code:

import ReactAce from "react-ace";
import React from "react";

import "ace-builds/src-noconflict/mode-python";
import "ace-builds/src-noconflict/theme-twilight";

function onChange(newValue) {
  console.log("change", newValue);
}

function handleClick() {
  alert();
}

function CodeEditor(props) {
  return (
    <>
      <ReactAce
        value={props.value}
        mode="python"
        theme="twilight"
        showPrintMargin={false}
        setReadOnly={false}
        setValue={props.value}
        fontSize={18}
        style={{
          height: "620px",
          width: "100%",
        }}
        onChange={onChange}
      />
      <button onClick={handleClick}>Run Code</button>
    </>
  );
}
export default CodeEditor;

Dharman · Accepted Answer · 2020-09-07 20:34:14Z

2

You can use a useState hook to manage the state of the text.

function CodeEditor(props) {
  // save the state here 
  const [ text, setText ] = useState('')
  const handleClick = () => {
    alert(text)
  }
  return (
    <>
      <ReactAce
        value={props.value}
        mode="python"
        theme="twilight"
        showPrintMargin={false}
        setReadOnly={false}
        setValue={props.value}
        fontSize={18}
        style={{
          height: "620px",
          width: "100%",
        }}
        // set the state when the value changes 
        onChange={(e) => setText(e.target.value)}
      />
      <button onClick={() => handleClick()}>Run Code</button>
    </>

edited Sep 7, 2020 at 20:34

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Sep 7, 2020 at 20:28

Karan Kumar

3,2368 gold badges41 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

StackUnderFlow Over a year ago

thanks, tried it out but seem to be getting a TypeError: Cannot read property 'value' of undefined. Looks to be happening on this line: onChange={(e) => setText(e.target.value)}

Karan Kumar Over a year ago

You need to pass in the value of instead of e.target.value.

Srinjoy Santra Over a year ago

replace with onChange={value => setText(value)}

Collectives™ on Stack Overflow

How to get new value from react ace editor on button click

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related