Change Text Area To Text

JavaScript
1

I am making a bio using react but once it is made and the submit is clicked, I want it to transform into just readable text but it does not change the textArea when I click submit.



const [textAreaValue, setTextAreaValue] = useState('');

 const changeArea = (event) => {
      setTextAreaValue(event.target.value);
      console.log(textAreaValue);
  }

<div className="bio">
    {changeArea.clicked ?
    //I want this display with the value
    <div className='bioText'>{textAreaValue}</div> :
    <textarea placeholder='Enter your bio here' onClick={changeArea}/>}
    </div>
2

use console.log({changeArea, 'changeArea.clicked': changeArea.clicked}) in there to observe how the value changes and if it changes how you want

3

Okay I do not understand I put that in and it gives me undefined for changeArea.clicked and a function for changeArea i get the whole string when I submit but how do I make an if statement with submit?


 <div className="bio">
    {console.log({changeArea, 'changeArea.clicked': changeArea.clicked})}
    //when clicked gives the string value
    <div className='bioText'>{textAreaValue}</div>
    <textarea placeholder='Enter your bio here' onChange={changeArea}/>
    </div>
 <button onClick={changeArea} className='subBio'>Submit</button>
4

changeArea is a function and here you’re trying to access a function’s clicked property. Are you sure that’s what you intend to do?

5

I just want it to be an if statement that starts with if this submit button is clicked …

6

what happens if the submit button is clicked?

to me I see that textAreaValue is an empty string at the beginning, and then gets content. Maybe you can use that?

7

I have a method changeArea that collects input and then when submit is pressed will set textAreaValue to what is in the box but what I don’t understand is how to write a if statement that shows

when the submit button is clicked shows the value of that string entered but if it is not shows the text area.

8

yeah, and you need to write this statement to do that

so or you create the clickedb property, or use something else.

my proposal is to use the state.

textAreaValue starts as empty string, and then is cganged when changeArea is used - so if it’s an empty string the button has not been clicked yet

9

Is it going to be a form submission or just a button click?

I would make the textarea a controlled input, and change the event to onChange for it. Then create a boolean state variable to toggle between the two layouts on the button click.

Example 
function App() {
  const [textAreaValue, setTextAreaValue] = useState('');
  const [submitted, setSubmitted] = useState(false);

  const handleOnChange = (event) => {
    setTextAreaValue(event.target.value);
  };

  return (
    <div className="bio">
      {submitted ? (
        <>
          <div className="bioText">{textAreaValue}</div>
          <button onClick={() => setSubmitted(false)}>Re-Submit</button>
        </>
      ) : (
        <>
          <textarea
            value={textAreaValue}
            placeholder="Enter your bio here"
            onChange={handleOnChange}
          ></textarea>
          <button onClick={() => setSubmitted(true)}>Submit</button>
        </>
      )}
    </div>
  );
}

export default App;
10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.