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