React: Passing value from child component to parent component

Question

I have a textbox which contains data from an api call. Then the user can edit this textbox.
I want to get the edited text to send it back by api call. The value is always sent empty. Can anyone help me in that?

Child Component

export default function RulesText({ruleText, readOnlyStatus, onChange}:{ruleText:string, readOnlyStatus:boolean, onChange:(val:string) => void}) {
    
    const[textValue, setTextValue] = useState(ruleText)
    
    return (
    <div>
        <textarea  
                readOnly={readOnlyStatus}
                value={textValue}
                onChange={(e) => {setTextValue(e.target.value)}}
            />
    </div>
  )
}

Parent Component

const[editedRuleText, setEditedRuleText] = useState('')

<RulesText ruleText={rules[1].substring(rules[1].indexOf(":") + 1)} readOnlyStatus={isEditing ? false : true} onChange={(val:string) => {setEditedRuleText(val); console.log('Val Now' + val)}}/>

You aren't using the onChange property that you pass in your child cpt arguments. — Peterrabbit
– Peterrabbit, Commented Mar 31, 2022 at 10:01

Nick Vu · Accepted Answer · 2022-03-31 11:46:19Z

1

You already have prop onChange from the parent component, but you haven't called onChange prop in RulesText

The change could be

export default function RulesText({ruleText, readOnlyStatus, onChange}:{ruleText:string, readOnlyStatus:boolean, onChange:(val:string) => void}) {
    
    const[textValue, setTextValue] = useState(ruleText)
    
    return (
    <div>
        <textarea  
                readOnly={readOnlyStatus}
                value={textValue}
                onChange={(e) => {
                   setTextValue(e.target.value)
                   onChange(e.target.value) //pass value to the parent component
                }}
            />
    </div>
  )
}

answered Mar 31, 2022 at 11:46

Nick Vu

15.6k5 gold badges29 silver badges37 bronze badges

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

Collectives™ on Stack Overflow

React: Passing value from child component to parent component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related