Send LI value in another input value in React
I'm in a React Project, where after an axios.get, I get many LI inside an empty UL before the axios.get.
When the LI are displayed after the axios.get, I want on click on one LI, to send the LI value to an input value.
I know how to do this with Jquery, (examples here: http://jsfiddle.net/Ender/QdWxH/ & http://jsfiddle.net/kbFUu/1/), but I don't know how to do it in React... Can someone help me ?
In my src/App.js I got the function
getValueFromLi = (evt) => {
$('.App-Result-Li').on('click',function() {
var content= $(this).text();
$('.App-Form-Trips-cityDeparture').val(content);
});
}
and in the src/components/Results/index.js (don't worry, I did well with the props, etc.), I got the callback
<li
onClick={getValueFromLi}
data-value={city.local_name}
className="App-Result-Li"
>
Do you know what is wrong in what I did ?
My project is on Github : https://github.com/Versifiction/api-tictactrip
Files involved :
src/App.js (https://github.com/Versifiction/api-tictactrip/blob/master/src/App.js)
& src/components/Results/index.js (https://github.com/Versifiction/api-tictactrip/blob/master/src/components/Results/index.js)
Thank you so much !
reactjs
asked Nov 22 at 21:40
Versifiction
204
add a comment |
I'm in a React Project, where after an axios.get, I get many LI inside an empty UL before the axios.get.
When the LI are displayed after the axios.get, I want on click on one LI, to send the LI value to an input value.
I know how to do this with Jquery, (examples here: http://jsfiddle.net/Ender/QdWxH/ & http://jsfiddle.net/kbFUu/1/), but I don't know how to do it in React... Can someone help me ?
In my src/App.js I got the function
getValueFromLi = (evt) => {
$('.App-Result-Li').on('click',function() {
var content= $(this).text();
$('.App-Form-Trips-cityDeparture').val(content);
});
}
and in the src/components/Results/index.js (don't worry, I did well with the props, etc.), I got the callback
<li
onClick={getValueFromLi}
data-value={city.local_name}
className="App-Result-Li"
>
Do you know what is wrong in what I did ?
My project is on Github : https://github.com/Versifiction/api-tictactrip
Files involved :
src/App.js (https://github.com/Versifiction/api-tictactrip/blob/master/src/App.js)
& src/components/Results/index.js (https://github.com/Versifiction/api-tictactrip/blob/master/src/components/Results/index.js)
Thank you so much !
reactjs
asked Nov 22 at 21:40
Versifiction
204
add a comment |
I'm in a React Project, where after an axios.get, I get many LI inside an empty UL before the axios.get.
When the LI are displayed after the axios.get, I want on click on one LI, to send the LI value to an input value.
I know how to do this with Jquery, (examples here: http://jsfiddle.net/Ender/QdWxH/ & http://jsfiddle.net/kbFUu/1/), but I don't know how to do it in React... Can someone help me ?
In my src/App.js I got the function
getValueFromLi = (evt) => {
$('.App-Result-Li').on('click',function() {
var content= $(this).text();
$('.App-Form-Trips-cityDeparture').val(content);
});
}
and in the src/components/Results/index.js (don't worry, I did well with the props, etc.), I got the callback
<li
onClick={getValueFromLi}
data-value={city.local_name}
className="App-Result-Li"
>
Do you know what is wrong in what I did ?
My project is on Github : https://github.com/Versifiction/api-tictactrip
Files involved :
src/App.js (https://github.com/Versifiction/api-tictactrip/blob/master/src/App.js)
& src/components/Results/index.js (https://github.com/Versifiction/api-tictactrip/blob/master/src/components/Results/index.js)
Thank you so much !
reactjs
asked Nov 22 at 21:40
Versifiction
204
I'm in a React Project, where after an axios.get, I get many LI inside an empty UL before the axios.get.
When the LI are displayed after the axios.get, I want on click on one LI, to send the LI value to an input value.
I know how to do this with Jquery, (examples here: http://jsfiddle.net/Ender/QdWxH/ & http://jsfiddle.net/kbFUu/1/), but I don't know how to do it in React... Can someone help me ?
In my src/App.js I got the function
getValueFromLi = (evt) => {
$('.App-Result-Li').on('click',function() {
var content= $(this).text();
$('.App-Form-Trips-cityDeparture').val(content);
});
}
and in the src/components/Results/index.js (don't worry, I did well with the props, etc.), I got the callback
<li
onClick={getValueFromLi}
data-value={city.local_name}
className="App-Result-Li"
>
Do you know what is wrong in what I did ?
My project is on Github : https://github.com/Versifiction/api-tictactrip
Files involved :
src/App.js (https://github.com/Versifiction/api-tictactrip/blob/master/src/App.js)
& src/components/Results/index.js (https://github.com/Versifiction/api-tictactrip/blob/master/src/components/Results/index.js)
Thank you so much !
reactjs
reactjs
asked Nov 22 at 21:40
Versifiction
204
asked Nov 22 at 21:40
Versifiction
204
edited Nov 22 at 21:49
asked Nov 22 at 21:40
Versifiction
204
asked Nov 22 at 21:40
Versifiction
204
asked Nov 22 at 21:40
Versifiction
204
204
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
maybe you could try like this:
<li
onClick={() => this.provideLocalName(city.local_name)}
data-value={city.local_name}
className="App-Result-Li"
>
also, you could parse the event object in your getValueFromLi function and do something with it then, e.g.
getValueFromLi = e => {
console.log('li element: ', e.target)
// do something with li, now you have reference to the dom node
}
<li
onClick={this.getValueFromLi}
data-value={city.local_name}
className="App-Result-Li"
>
answered Nov 22 at 21:46
Cecil
21125
hmm i don't even get the console log in the console, I think the <li onClick={getValueFromLi}> in the src/components/Results/index.js is not even reached..
– Versifiction
Nov 22 at 21:53
try <li onClick={() => getValueFromLi()}>. It needs to be a function not yet executed
– Cecil
Nov 22 at 21:55
Oh my god, the problem was that I sended the function getValueFromLi as a prop but to another component, so the function never get to the Results component.... i'm so sorry, thank you for spend tiem to help me, I will like your answer, sorry !!!!!
– Versifiction
Nov 22 at 21:58
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53438262%2fsend-li-value-in-another-input-value-in-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
maybe you could try like this:
<li
onClick={() => this.provideLocalName(city.local_name)}
data-value={city.local_name}
className="App-Result-Li"
>
also, you could parse the event object in your getValueFromLi function and do something with it then, e.g.
getValueFromLi = e => {
console.log('li element: ', e.target)
// do something with li, now you have reference to the dom node
}
<li
onClick={this.getValueFromLi}
data-value={city.local_name}
className="App-Result-Li"
>
answered Nov 22 at 21:46
Cecil
21125
hmm i don't even get the console log in the console, I think the <li onClick={getValueFromLi}> in the src/components/Results/index.js is not even reached..
– Versifiction
Nov 22 at 21:53
try <li onClick={() => getValueFromLi()}>. It needs to be a function not yet executed
– Cecil
Nov 22 at 21:55
Oh my god, the problem was that I sended the function getValueFromLi as a prop but to another component, so the function never get to the Results component.... i'm so sorry, thank you for spend tiem to help me, I will like your answer, sorry !!!!!
– Versifiction
Nov 22 at 21:58
add a comment |
maybe you could try like this:
<li
onClick={() => this.provideLocalName(city.local_name)}
data-value={city.local_name}
className="App-Result-Li"
>
also, you could parse the event object in your getValueFromLi function and do something with it then, e.g.
getValueFromLi = e => {
console.log('li element: ', e.target)
// do something with li, now you have reference to the dom node
}
<li
onClick={this.getValueFromLi}
data-value={city.local_name}
className="App-Result-Li"
>
answered Nov 22 at 21:46
Cecil
21125
hmm i don't even get the console log in the console, I think the <li onClick={getValueFromLi}> in the src/components/Results/index.js is not even reached..
– Versifiction
Nov 22 at 21:53
try <li onClick={() => getValueFromLi()}>. It needs to be a function not yet executed
– Cecil
Nov 22 at 21:55
Oh my god, the problem was that I sended the function getValueFromLi as a prop but to another component, so the function never get to the Results component.... i'm so sorry, thank you for spend tiem to help me, I will like your answer, sorry !!!!!
– Versifiction
Nov 22 at 21:58
add a comment |
maybe you could try like this:
<li
onClick={() => this.provideLocalName(city.local_name)}
data-value={city.local_name}
className="App-Result-Li"
>
also, you could parse the event object in your getValueFromLi function and do something with it then, e.g.
getValueFromLi = e => {
console.log('li element: ', e.target)
// do something with li, now you have reference to the dom node
}
<li
onClick={this.getValueFromLi}
data-value={city.local_name}
className="App-Result-Li"
>
answered Nov 22 at 21:46
Cecil
21125
maybe you could try like this:
<li
onClick={() => this.provideLocalName(city.local_name)}
data-value={city.local_name}
className="App-Result-Li"
>
also, you could parse the event object in your getValueFromLi function and do something with it then, e.g.
getValueFromLi = e => {
console.log('li element: ', e.target)
// do something with li, now you have reference to the dom node
}
<li
onClick={this.getValueFromLi}
data-value={city.local_name}
className="App-Result-Li"
>
answered Nov 22 at 21:46
Cecil
21125
answered Nov 22 at 21:46
Cecil
21125
answered Nov 22 at 21:46
Cecil
21125
answered Nov 22 at 21:46
Cecil
21125
21125
hmm i don't even get the console log in the console, I think the <li onClick={getValueFromLi}> in the src/components/Results/index.js is not even reached..
– Versifiction
Nov 22 at 21:53
try <li onClick={() => getValueFromLi()}>. It needs to be a function not yet executed
– Cecil
Nov 22 at 21:55
Oh my god, the problem was that I sended the function getValueFromLi as a prop but to another component, so the function never get to the Results component.... i'm so sorry, thank you for spend tiem to help me, I will like your answer, sorry !!!!!
– Versifiction
Nov 22 at 21:58
add a comment |
hmm i don't even get the console log in the console, I think the <li onClick={getValueFromLi}> in the src/components/Results/index.js is not even reached..
– Versifiction
Nov 22 at 21:53
try <li onClick={() => getValueFromLi()}>. It needs to be a function not yet executed
– Cecil
Nov 22 at 21:55
Oh my god, the problem was that I sended the function getValueFromLi as a prop but to another component, so the function never get to the Results component.... i'm so sorry, thank you for spend tiem to help me, I will like your answer, sorry !!!!!
– Versifiction
Nov 22 at 21:58
hmm i don't even get the console log in the console, I think the <li onClick={getValueFromLi}> in the src/components/Results/index.js is not even reached..
– Versifiction
Nov 22 at 21:53
hmm i don't even get the console log in the console, I think the <li onClick={getValueFromLi}> in the src/components/Results/index.js is not even reached..
– Versifiction
Nov 22 at 21:53
try <li onClick={() => getValueFromLi()}>. It needs to be a function not yet executed
– Cecil
Nov 22 at 21:55
try <li onClick={() => getValueFromLi()}>. It needs to be a function not yet executed
– Cecil
Nov 22 at 21:55
Oh my god, the problem was that I sended the function getValueFromLi as a prop but to another component, so the function never get to the Results component.... i'm so sorry, thank you for spend tiem to help me, I will like your answer, sorry !!!!!
– Versifiction
Nov 22 at 21:58
Oh my god, the problem was that I sended the function getValueFromLi as a prop but to another component, so the function never get to the Results component.... i'm so sorry, thank you for spend tiem to help me, I will like your answer, sorry !!!!!
– Versifiction
Nov 22 at 21:58
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53438262%2fsend-li-value-in-another-input-value-in-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
