Question 346286 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Getting value from different react component – onClick of a LOG button

    function Paste() {
    const Log = "LOG";
    const [logList, setLogList] = useState([
        { text: 'Yes', id: 1 }
    ]);
    const [newLogValue, setNewLogValue] = useState(0);
    
    const appendToList = () => {
        alert(newLogValue);
        const newLogList = [...logList, { text: newLogValue, id: logList.length + 1 }];
        setLogList(newLogList);
    };
    
    return (<>
        <textarea style={{width: '24%', height: '80%', display: "block", marginLeft: '3%', verticalAlign: 'top', border: '3px solid #F08080', background: '#808080'}} onChange={e => setNewLogValue(e.target.value)}></textarea>
        <button style={{width: '24.3%', height: '10%', display: "block", float:'left', marginLeft: '3%'}} value={Log}><p style={{FontFace: 'Mono', fontWeight: 'bold', fontSize: '14px'}} onClick={appendToList}>LOG</p></button>
        <List logList={logList}></List>
    </>);
}



export default Paste;

This code is not working consistently, It randomly captures the value. Most of the time it doesnt. I tried different events like onBlur, onBlurCapture, onChange, onChangeCapture but no difference. Is there any way to get the value from textArea and append it to logList ?

Tags:

2

Answers


  1. 0

    Pass the onClick event handler to the button, and not to the content of the button.

    <button value={Log} onClick={appendToList}>

    Example:

    const { useState } = React;

const List = ({ logList }) => (
  <ul>
    {logList.map(({ text, id }) => (
      <li key={id}>{text}</li>
    ))}
  </ul>
);

function Paste() {
  const Log = "LOG";
  const [logList, setLogList] = useState([{
    text: 'Yes',
    id: 1
  }]);
  const [newLogValue, setNewLogValue] = useState(0);

  const appendToList = () => {
    const newLogList = [...logList, {
      text: newLogValue,
      id: logList.length + 1
    }];
    setLogList(newLogList);
  };

  return (
    <div>
      <textarea onChange={e => setNewLogValue(e.target.value)}></textarea>
      <button value={Log} onClick={appendToList}>
        <p>LOG</p>
      </button>
      <List logList={logList}></List>
    </div>
  );
}

ReactDOM
  .createRoot(root)
  .render(<Paste />);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

<div id="root"></div>
    Login or Signup to reply.
  2. 0

    generally, you’re not supposed to put block elements ( p tag) inside of inline elements (button tag ). Despite this, your code is working but your button randomly captures the value because you’re clicking in the button tag, not the p tag where you have the onCkick function, just move the onClick function to the button tag

    <button value={Log} onClick={appendToList} style={{...}}>
        <p style={{...}} >LOG</p>
 </button>

    this will work, But your code will be much cleaner if you get rid of the p tag from the button

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search