CODEWITHSUNDEEP
javascriptreactjs
React Developer
React Developer

Reputation: 21

React: Passing value from child component to parent component

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

Upvotes: 0

Views: 59

Answers (1)

Nick Vu
Nick Vu

Reputation: 15540

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

Upvotes: 1

Related Questions