React: Passing value from child component to parent component-CodePudding

I have a textbox which conatins data from 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)}}/>

CodePudding user response：

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>
  )
}